/* Dearly brand layer — base values read from the app frames (Core › Flow / am - clear / font system specimen),
   plus semantic aliases. Figma Variables live in fig-tokens.css. */
:root{
  /* base palette */
  --dearly-white:rgb(255,255,255);
  --dearly-ink:rgb(93,93,93);
  --dearly-charcoal:rgb(38,44,47);
  --dearly-graphite:rgb(51,51,51);
  --dearly-black:rgb(26,26,26);
  --dearly-night:rgb(35,35,35);
  --dearly-stone:rgb(152,152,152);
  --dearly-sage:rgb(227,243,205);
  --dearly-sage-2:rgb(226,242,204);
  --dearly-olive:rgb(76,90,46);
  --dearly-mist:rgb(176,196,209);
  --dearly-slate:rgb(204,213,219);
  --dearly-fog:rgb(230,234,237);
  --dearly-teal-ink:rgb(55,85,100);
  --dearly-sky:rgb(124,179,215);
  --dearly-aqua:rgb(175,222,238);
  --dearly-cream:rgb(249,245,241);
  --dearly-sand:rgb(244,229,204);
  --dearly-bronze:rgb(138,109,63);
  --dearly-lilac:rgb(236,220,244);
  --dearly-mauve:rgb(149,107,132);
  --dearly-midnight:rgb(57,68,110);
  --dearly-glass:rgba(255,255,255,0.5);
  --dearly-glass-sheet:rgba(255,255,255,0.3);
  --dearly-grabber:rgba(255,255,255,0.5);

  /* type families */
  --font-display:"Host Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --font-serif:"Newsreader","Source Serif 4",Georgia,serif;
  --font-serif-italic:"Source Serif 4","Newsreader",Georgia,serif;
  --font-alt:"Be Vietnam Pro",-apple-system,sans-serif;
  --font-body:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-wordmark:"Outfit",-apple-system,sans-serif;

  /* type scale — names match readme TYPE SCALE */
  --type-h1:400 44px/48px var(--font-display);
  --type-h2:400 36px/40px var(--font-display);
  --type-h3:400 30px/36px var(--font-display);
  --type-h4:400 24px/28px var(--font-display);
  --type-card-title:500 24px/28px var(--font-display);
  --type-tile-title:500 18px/20px var(--font-display); /* memory tile titles */
  --type-sub:400 16px/24px var(--font-body);
  --type-body:400 18px/28px var(--font-body);
  --type-body-s:400 16px/24px var(--font-body);
  --type-body-xs:400 14px/20px var(--font-body);
  --type-button:500 18px/20px var(--font-display);
  --type-button-s:500 16px/20px var(--font-display);
  --type-pill:400 14px/20px var(--font-mono); /* tappable: tabs, filters, answers */
  --type-link:400 14px/20px var(--font-mono);
  --type-chip:400 12px/16px var(--font-mono); /* read-only tags */
  --type-caption:400 12px/18px var(--font-mono);
  --type-label:400 12px/16px var(--font-mono); /* uppercase, +.06em */
  --type-mono-title:500 16px/20px var(--font-mono);
  --type-mono-lead:400 16px/20px var(--font-mono);
  --type-micro:500 10px/12px var(--font-mono); /* rare: only inside tiny shapes (avatar initials, weekday letters) */
  --type-serif-body:400 18px/28px var(--font-serif);
  /* legacy aliases */
  --type-hero:var(--type-h1);
  --type-h-sheet:var(--type-h3);
  --type-small:var(--type-body-xs);
  --type-mono-chip:var(--type-pill);
  --type-mono-caption:var(--type-caption);

  /* spacing (observed gaps/paddings) */
  --space-3:3px;--space-5:5px;--space-10:10px;--space-15:15px;--space-18:18px;--space-20:20px;--space-21:21px;--space-30:30px;--space-35:35px;--space-40:40px;
  --screen-gutter:var(--content-inset); /* legacy alias */

  /* layout grid — Figma: 12 columns, stretch, margin 0, gutter 20 (402 frame → col ≈15.17px) */
  --grid-columns:12; /* @kind other */
  --grid-gutter:20px;
  --grid-margin:0px;
  --grid-col:calc((100% - 2 * var(--grid-margin) - 11 * var(--grid-gutter)) / 12);
  /* content starts after col 1 and ends before col 12 — inset = 1 column (≈15.17px @ 402 → 372px content) */
  --content-inset:15.17px;

  /* radii — only two in use: 30px cards, full pill */
  --radius-card:30px;
  --radius-pill:9999px;
  /* legacy aliases → the two radii */
  --radius-banner:var(--radius-card);
  --radius-sheet:var(--radius-card);
  --radius-fab:var(--radius-pill);

  /* type × colour roles */
  --text-heading:var(--dearly-teal-ink);
  --text-sub:var(--dearly-meta); /* Misty — Purity, Grass, Heaven */
  --text-sub-ocean:var(--dearly-teal-ink); /* Deep Sea on Ocean */
  --text-on-photo:#fff;
  --text-on-sheet:#fff; /* Purity — modal headings */
  --text-on-sheet-sub:#E6EAED; /* Cloud — modal supporting text */

  /* nav bar — bare on home at rest, tinted glass band elsewhere */
  --nav-icon-on:var(--dearly-teal-ink);
  --nav-icon-off:rgba(55,85,100,.5); /* Deep Sea 50% */
  --nav-height:92px;
  --nav-pad-top:12px;
  --nav-row:50px;
  --nav-inset-bottom:30px;
  --nav-band-purity:rgba(255,255,255,.7);
  --nav-band-heaven:rgba(204,213,219,.7);
  --nav-band-ocean:rgba(176,196,209,.7);
  --nav-band-grass:rgba(227,243,205,.7);
  --nav-band-photo:var(--nav-band-ocean); /* home photo settles into Ocean */
  --photo-scrim:rgba(38,44,47,.18); /* darkens photo tiles under white text */
  --nav-band-blur:blur(24px) saturate(1.4); /* @kind other */
  --nav-hairline:rgba(55,85,100,.15);

  /* scroll edge fade — fade the CONTENT, never overlay white. Apply on the scroll container. */
  --scroll-fade-top:88px;
  --scroll-fade-bottom:120px;
  --scroll-fade-mask:linear-gradient(to bottom,transparent 0,#000 var(--scroll-fade-top),#000 calc(100% - var(--scroll-fade-bottom)),transparent 100%); /* @kind other */

  /* elevation */
  --shadow-float:0px 12px 32px 0px rgba(20,30,40,0.3);
  --shadow-toast:0px 8px 24px 0px rgba(55,85,100,0.12);
  --surface-menu:rgba(255,255,255,0.96);
  --dearly-sage-tint:rgb(238,243,223);
  --dearly-sand-tint:rgb(242,236,220);
  --dearly-search:rgb(233,237,240);
  --dearly-meta:rgb(134,139,141);

  /* semantic aliases */
  --text-primary:var(--dearly-teal-ink);
  --text-strong:var(--dearly-teal-ink);
  --text-subtle:var(--dearly-meta);
  --text-on-photo:var(--dearly-white);
  --text-on-dark:var(--dearly-mist);
  --surface-page:var(--dearly-slate); /* light screens = Heaven */
  --surface-raised:var(--dearly-white); /* cards, rows, fields on Heaven = Purity */
  --surface-card:var(--dearly-sage);
  --surface-chip:var(--dearly-sage);
  --surface-option:var(--dearly-mist);
  --surface-dark:var(--dearly-night);
  --surface-glass:var(--dearly-glass);
  --surface-sheet:var(--dearly-glass-sheet);
  --surface-welcome:var(--dearly-cream);
  --action-primary-bg:var(--dearly-sage);
  --action-primary-fg:var(--dearly-teal-ink);
  --action-light-bg:var(--dearly-white);
  --action-light-fg:var(--dearly-teal-ink);
  --action-fab-bg:var(--dearly-sage-2);
  --brand-mark:var(--dearly-charcoal);
}