/* =========================================================================
   AiCari Design Tokens
   colors_and_type.css
   -------------------------------------------------------------------------
   Single source of truth for color, type, spacing, radius, shadow, motion.
   Import once at the top of any HTML or component:
     <link rel="stylesheet" href="colors_and_type.css">
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700;800;900&family=Noto+Sans+JP:wght@400;500;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* -- Color: ink ----------------------------------------------------- */
  --ink:           #1A1F2E;   /* primary text — slightly warm, not pure black */
  --ink-2:         #3D4659;
  --ink-3:         #6B7488;
  --ink-4:         #9099AC;
  --rule:          #E5E1D8;   /* warm hairline */
  --rule-strong:   #C9C3B5;

  /* -- Color: surfaces ------------------------------------------------ */
  --surface-paper:   #FAF7F0;   /* warm off-white — the default page bg */
  --surface-card:    #FFFFFF;
  --surface-sunken:  #F2EEE3;
  --surface-overlay: rgba(26, 31, 46, 0.45);

  /* -- Color: brand (WARM + POP) -------------------------------------- */
  --coral:         #F26B47;
  --coral-2:       #DC5733;
  --coral-soft:    #FFD9C7;
  --coral-ink:     #8C3418;

  --sun:           #FFC857;
  --sun-soft:      #FFEFC8;

  /* Tertiary: peach — soft warm backdrop */
  --peach:         #FFB088;
  --peach-soft:    #FFE4D2;

  /* Aliases (back-compat with old aqua/indigo names) */
  --aqua:          var(--coral);
  --aqua-2:        var(--coral-2);
  --aqua-soft:     var(--coral-soft);
  --aqua-ink:      var(--coral-ink);
  --indigo:        var(--coral);
  --indigo-2:      var(--coral-2);
  --indigo-soft:   var(--coral-soft);
  --indigo-ink:    var(--coral-ink);
  --dawn:          var(--sun);
  --dawn-2:        var(--sun);
  --dawn-soft:     var(--sun-soft);

  /* -- Color: semantic (used sparingly) ------------------------------- */
  --moss:          #5C7A5A;   /* positive / growth */
  --moss-soft:     #E4ECE2;
  --clay:          #B85C3C;   /* caution — never alarming red */
  --clay-soft:     #F5DDD1;

  /* -- Focus ring ----------------------------------------------------- */
  --focus-ring:    0 0 0 3px var(--aqua-soft);

  /* -- Type families (POP direction — rounded gothic, no serif) ------- */
  --font-rounded-jp: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'YuGothic', sans-serif;
  --font-sans-jp:    'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'YuGothic', sans-serif;
  --font-rounded:    'M PLUS Rounded 1c', var(--font-rounded-jp);
  --font-sans:       'Plus Jakarta Sans', var(--font-sans-jp);
  --font-mono:       'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Display stack: M PLUS Rounded 1c — the chosen wordmark face. */
  --font-display:  var(--font-rounded);
  --font-ui:       var(--font-sans), var(--font-sans-jp);

  /* -- Type scale (display, marketing) -------------------------------- */
  --fs-display-1:  64px;   /* hero */
  --fs-display-2:  48px;   /* section opener */
  --fs-display-3:  36px;   /* in-page H2 */
  --fs-h1:         32px;
  --fs-h2:         24px;
  --fs-h3:         20px;
  --fs-body-lg:    18px;   /* lead paragraphs */
  --fs-body:       16px;   /* default body */
  --fs-body-sm:    14px;
  --fs-caption:    13px;
  --fs-micro:      11px;

  /* -- Line heights --------------------------------------------------- */
  --lh-display:    1.18;
  --lh-heading:    1.32;
  --lh-body:       1.75;   /* generous for JP */
  --lh-tight:      1.4;

  /* -- Letter spacing ------------------------------------------------- */
  --tracking-display: -0.01em;
  --tracking-tight:   -0.005em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;     /* eyebrow labels, small caps */

  /* -- Spacing (8-pt baseline) --------------------------------------- */
  --s-2:   2px;
  --s-4:   4px;
  --s-8:   8px;
  --s-12:  12px;
  --s-16:  16px;
  --s-24:  24px;
  --s-32:  32px;
  --s-48:  48px;
  --s-64:  64px;
  --s-96:  96px;
  --s-128: 128px;

  /* -- Radius --------------------------------------------------------- */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* -- Shadow (warm, low) -------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(26, 31, 46, .05), 0 1px 1px rgba(26, 31, 46, .04);
  --shadow-md: 0 4px 12px rgba(26, 31, 46, .06), 0 2px 4px rgba(26, 31, 46, .04);
  --shadow-lg: 0 16px 40px rgba(26, 31, 46, .08), 0 4px 12px rgba(26, 31, 46, .04);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .6);

  /* -- Motion --------------------------------------------------------- */
  --ease-out:   cubic-bezier(.2, .7, .2, 1);
  --ease-inout: cubic-bezier(.4, 0, .2, 1);
  --dur-micro:  160ms;
  --dur-base:   240ms;
  --dur-enter:  360ms;
  --dur-page:   480ms;

  /* -- Layout --------------------------------------------------------- */
  --content-marketing: 1200px;
  --content-prose:     720px;
  --content-app:       960px;
}

/* =========================================================================
   Base / reset
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface-paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--indigo-soft); color: var(--indigo-ink); }

/* =========================================================================
   Semantic typography
   ========================================================================= */

.display-1, .display-2, .display-3,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
  margin: 0;
  text-wrap: balance;
}

.display-1 { font-size: var(--fs-display-1); font-weight: 800; }
.display-2 { font-size: var(--fs-display-2); font-weight: 700; }
.display-3 { font-size: var(--fs-display-3); font-weight: 700; }

h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); font-weight: 700; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: 700; }
h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  font-weight: 500;
  font-family: var(--font-ui);
  letter-spacing: var(--tracking-tight);
}

p, .body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
  margin: 0 0 var(--s-16);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-body-lg);
  color: var(--ink-2);
  line-height: 1.7;
}

.caption, small {
  font-size: var(--fs-caption);
  color: var(--ink-3);
  line-height: 1.5;
}

.micro {
  font-size: var(--fs-micro);
  color: var(--ink-3);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--aqua);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.num, .data {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--indigo);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-micro) var(--ease-out);
}
a:hover { text-decoration-color: var(--coral); }

hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: var(--s-32) 0;
}

/* =========================================================================
   Buttons
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              box-shadow var(--dur-micro) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.btn-primary {
  background: var(--aqua);
  color: #fff;
  box-shadow: 0 2px 0 var(--aqua-2), 0 4px 12px rgba(31, 184, 176, .25);
}
.btn-primary:hover { background: var(--aqua-2); transform: translateY(1px); box-shadow: 0 1px 0 var(--aqua-ink), 0 2px 8px rgba(31, 184, 176, .25); }
.btn-primary:active { background: var(--aqua-ink); transform: translateY(2px); box-shadow: none; }

.btn-coral {
  background: var(--coral);
  color: #fff;
  box-shadow: 0 2px 0 var(--coral-2), 0 4px 12px rgba(255, 122, 89, .25);
}
.btn-coral:hover { background: var(--coral-2); transform: translateY(1px); }

.btn-secondary {
  background: var(--surface-card);
  color: var(--aqua-ink);
  border: 1.5px solid var(--aqua);
}
.btn-secondary:hover { background: var(--aqua-soft); }
.btn-secondary:active { background: #BCE6E3; }

.btn-ghost {
  background: transparent;
  color: var(--ink-2);
}
.btn-ghost:hover { background: var(--surface-sunken); color: var(--ink); }

.btn-sm { padding: 8px 16px; font-size: var(--fs-body-sm); }
.btn-lg { padding: 18px 32px; font-size: var(--fs-body-lg); }

/* =========================================================================
   Form inputs
   ========================================================================= */

.input, .textarea, .select {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--surface-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 12px 14px;
  width: 100%;
  transition: border-color var(--dur-micro) var(--ease-out),
              box-shadow var(--dur-micro) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--aqua);
  box-shadow: var(--focus-ring);
}

.label {
  display: block;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
}

/* =========================================================================
   Card
   ========================================================================= */

.card {
  background: var(--surface-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-24);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.card-interactive:hover { box-shadow: var(--shadow-md); }

/* =========================================================================
   Badge / Chip
   ========================================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  color: var(--ink-2);
}
.badge-indigo { background: var(--aqua-soft);  color: var(--aqua-ink); }
.badge-aqua   { background: var(--aqua-soft);  color: var(--aqua-ink); }
.badge-dawn   { background: var(--coral-soft); color: var(--coral-2); }
.badge-coral  { background: var(--coral-soft); color: var(--coral-2); }
.badge-sun    { background: var(--sun-soft);   color: #8A6D1A; }
.badge-moss   { background: var(--moss-soft);  color: var(--moss); }

/* =========================================================================
   Utility
   ========================================================================= */

.container { max-width: var(--content-marketing); margin: 0 auto; padding: 0 var(--s-24); }
.container-prose { max-width: var(--content-prose); margin: 0 auto; padding: 0 var(--s-24); }
.container-app { max-width: var(--content-app); margin: 0 auto; padding: 0 var(--s-24); }

.stack-4  > * + * { margin-top: var(--s-4); }
.stack-8  > * + * { margin-top: var(--s-8); }
.stack-12 > * + * { margin-top: var(--s-12); }
.stack-16 > * + * { margin-top: var(--s-16); }
.stack-24 > * + * { margin-top: var(--s-24); }
.stack-32 > * + * { margin-top: var(--s-32); }
.stack-48 > * + * { margin-top: var(--s-48); }

.row { display: flex; gap: var(--s-16); align-items: center; }
.row-tight { display: flex; gap: var(--s-8); align-items: center; }