/* ============================================================
   Andrick Counseling — Design Tokens
   Jessica Andrick, LCPC · Single source of truth for the website
   ------------------------------------------------------------
   Palette & type from the official v4.3 brand guide (Sage archetype,
   lotus mark). Soft, approachable, grounded — never corporate, never neon.

   Type: Tokyo Dreams (display, self-hosted below) + Mulish (body — a
   web-available stand-in for the brand's Proxima Nova). Load Mulish with:
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700&display=swap" rel="stylesheet">
   ============================================================ */

@font-face {
  font-family: "Tokyo Dreams";
  src: url("/assets/fonts/TokyoDreams.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* — Core palette (official v4.3) ————————————————— */
  --color-cream:       #F8F4EE; /* Soft Ivory — ground / page canvas */
  --color-cream-deep:  #EFE9DC; /* alt surface, subtle fills         */
  --color-slate:       #4A515B; /* Slate — ink, primary text, brand  */
  --color-slate-soft:  #5C626F; /* secondary text (AA on ivory)      */
  --color-sage:        #7A8F84; /* Sage — primary accent (leaves)    */
  --color-sage-deep:   #566B60; /* accessible sage text on ivory (AA)*/
  --color-rose:        #C7999F; /* Perennial — secondary accent      */
  --color-rose-deep:   #985F68; /* accessible rose text on ivory (AA)*/
  --color-blue:        #A9B9C3; /* Blue Haze — tertiary accent       */
  --color-plum:        #5B4768; /* Plum — deep accent                */
  --color-neutral:     #8B867E; /* warm grey, muted captions         */
  --color-white:       #FDFBF6; /* soft white for cards on ivory     */

  /* — Semantic roles ——————————————————————————————— */
  --bg:                var(--color-cream);
  --bg-surface:        var(--color-white);
  --bg-surface-alt:    var(--color-cream-deep);
  --text:              var(--color-slate);
  --text-muted:        var(--color-slate-soft);
  --text-subtle:       var(--color-neutral);
  --accent:            var(--color-sage);
  --accent-text:       var(--color-sage-deep);
  --line:              rgba(74, 81, 91, 0.12);
  --line-strong:       rgba(74, 81, 91, 0.22);

  /* — Typography ———————————————————————————————————— */
  --font-display: "Tokyo Dreams", "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --font-body:    "Mulish", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;

  --weight-display:    400; /* Tokyo Dreams ships a single regular weight */
  --weight-display-md: 400;
  --weight-body:       400;
  --weight-semibold:   600;
  --weight-bold:       700;

  /* Type scale (1.25 major-third, base 18px) */
  --text-xs:   0.75rem;   /* 12px  captions, labels       */
  --text-sm:   0.875rem;  /* 14px  fine print             */
  --text-base: 1.125rem;  /* 18px  body                   */
  --text-lg:   1.375rem;  /* 22px  lead paragraph         */
  --text-xl:   1.75rem;   /* 28px  h4                     */
  --text-2xl:  2.5rem;    /* 40px  h3                     */
  --text-3xl:  3.5rem;    /* 56px  h2                     */
  --text-4xl:  5rem;      /* 80px  h1 / display           */

  --leading-tight: 1.1;
  --leading-snug:  1.3;
  --leading-body:  1.65;

  --tracking-wordmark: 0.22em; /* ANDRICK lockup spacing   */
  --tracking-label:    0.18em; /* COUNSELING / eyebrows    */
  --tracking-tight:    0.01em;

  /* — Spacing scale (4px base) ——————————————————————— */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;

  /* — Radius, shadow, motion ————————————————————————— */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(74, 81, 91, 0.06);
  --shadow-md: 0 8px 28px -12px rgba(74, 81, 91, 0.20);
  --shadow-lg: 0 24px 60px -24px rgba(74, 81, 91, 0.28);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  220ms;

  --content-width: 1080px;
}