/* tokens.css — design tokens for Dino Detective Agency
   Variables only, no rules. Linked on every page, ahead of the other stylesheets,
   so all pages read the same values.
   Covers color, type, spacing, line-height, the desk lamp and motion. Both stylesheet
   worlds (common.css on the tools, style.css on the account pages) read from here. */

:root {
  /* Surfaces — paper and folder */
  --paper-cream:  #fdf6e6;
  --folder-amber: #f7e3b4;
  --folder-edge:  #e9c17e;
  --sheet:        #f8e5b8;   /* flat divider sheets, section tabs, the current page tab */

  /* The folder's lamp shading runs --folder-amber → --folder-mid → --folder-edge;
     --folder-fill is the flat colour beneath it */
  --folder-mid:   #f2d39a;
  --folder-fill:  #f3d8a1;

  /* The lamp's falloff lies over the whole folder, over everything on it as well as the paper, so
     a label in the far corner dims with the paper under it instead of glowing. The paper is painted
     a touch lighter beneath it (the "bare" stops), so paper and falloff together still land on
     --folder-mid and --folder-edge. */
  --lamp-falloff:     linear-gradient(var(--lamp-angle), rgba(69, 26, 3, 0) 35%, rgba(69, 26, 3, 0.08) 100%);
  --folder-mid-bare:  #f6d89e;
  --folder-edge-bare: #f7cf89;

  /* The lamp's falloff where the page tabs stand, at the folder's far edge */
  --tab-shade: rgba(69, 26, 3, 0.07);

  /* The back sheet of the folder stack, one shade darker all the way down */
  --folder-back-light: #e6c47b;
  --folder-back-mid:   #ddb86a;
  --folder-back-dark:  #d4a855;

  /* Tool tabs that are not the current one, and the same tab under the pointer */
  --tab-inactive:       #ecd9a3;
  --tab-inactive-hover: #f0ddb0;

  /* The desk under the wood photo, seen while it loads */
  --desk-wood: #3d2b1f;

  /* The business card is real white card stock, the one pure white on the desk */
  --card-white: #ffffff;

  /* The code editor's selection: the standard light-blue editor selection */
  --code-selection: #add6ff;

  /* The loading spinner's ring; its turning top is --ink-900 */
  --spinner-track: #c9b99a;

  /* Words on the one red button, Forget Key */
  --danger-ink: #7f1d1d;

  /* Cream buttons are solid --paper-cream; a disabled one fades to this see-through cream */
  --cream-fill-off: rgba(248, 224, 170, 0.30);
  --on-green:       var(--paper-cream);          /* text and icons on the green: the lightest paper cream, 9.0:1 */

  /* Ink — text browns, darkest to lightest */
  --ink-900:  #451a03;
  --ink-700:  #78350f;
  --ink-600:  #92400e;
  --ink-500:  #b45309;

  /* The text ink. #451a03 reads as black at text size, so words use the warmer step:
     7.3:1 on divider sheets, 8.4 on cream boxes, 5.35 on the darkest folder edge.
     Quieter text uses the ladder below: 70% for small helper text, 60% for hints.
     The one exception is dark text on a coloured sticker, which keeps --ink-900. */
  --ink-text: var(--ink-700);

  /* Ink translucency ladder (from #451a03). The faint near-duplicate steps
     (.06 .08 .12 .15) are deliberately not published here; these seven read as
     distinct over cream. Live rgba() usages still carry the old steps. */
  --ink-a10: rgba(69, 26, 3, 0.10);
  --ink-a20: rgba(69, 26, 3, 0.20);
  --ink-a30: rgba(69, 26, 3, 0.30);
  --ink-a40: rgba(69, 26, 3, 0.40);
  --ink-a50: rgba(69, 26, 3, 0.50);
  --ink-a60: rgba(69, 26, 3, 0.60);
  --ink-a70: rgba(69, 26, 3, 0.70);

  /* Secondary ink translucency (from #78350f) */
  --ink7-a10: rgba(120, 53, 15, 0.10);
  --ink7-a30: rgba(120, 53, 15, 0.30);
  --ink7-a50: rgba(120, 53, 15, 0.50);

  /* Cream translucency (from #fdf6e6) — lightens dark surfaces; does nothing on cream */
  --cream-a50: rgba(253, 246, 230, 0.50);
  --cream-a80: rgba(253, 246, 230, 0.80);

  /* Green — the one interface green, matching the Login button */
  --green: #064e3b;

  /* The site title's glow, on the dark account pages only */
  --glow-green: #10b981;

  /* Status — semantic, mapped to base values so there is one source per color */
  --status-error: #dc2626;
  --status-warn:  var(--ink-500);   /* #b45309 — passes on cream; live #d97706 does not */
  --status-ok:    var(--green);     /* #064e3b */

  /* Dino sticker palette — the nine swatches from the dino artwork, used for the status
     stickers and labels. Olive and sage are art colors; none of these color code. */
  --dino-outline: #0e100a;
  --dino-bark:    #443420;
  --dino-olive:   #4b5b38;
  --dino-coat:    #725d45;
  --dino-sage:    #7b9164;
  --dino-grey:    #9a9a9a;
  --dino-lens:    #c7d0bf;
  --dino-amber:   #cd932a;
  --dino-white:   #ffffff;

  /* Aurelia Intelligence brand colours, as published on aureliaintel.co; used on the Aurelia
     business card */
  --aurelia-teal:   #00837B;
  --aurelia-muted:  #666666;

  /* Home tool colours — three pen inks from the same cup (red, purple, blue), softened for the
     paper the same way as the diff colours below; all three read at about 4.7:1 on the card cream */
  --tool-diffasaurus: #bc4840;
  --tool-analysaurus: #9055bb;
  --tool-notosaurus:  #3f6cc7;

  /* Diff colors — the familiar green and red developers expect for added and removed
     lines, kept in their hues and softened by about 30% so they sit warmly on the paper. */
  --diff-added:   #3e7a49;
  --diff-removed: #b74946;


  /* ---- Type ---------------------------------------------------------- */
  /* Inter loads on every page and IBM Plex Mono on the three tool pages. The display
     fallback here is Courier rather than the live cursive: if the webfont fails, the
     page should drop to a typewriter face rather than a script one. */
  --font-display: 'Special Elite', 'Courier New', monospace;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* Scale — compact, digital first. 14px is deliberately absent. */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   26px;
  --text-2xl:  34px;
  --text-3xl:  44px;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --tracking-display: 0.02em;
  --tracking-wide:    0.06em;
  --tracking-caps:    0.12em;

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.55;

  /* ---- Spacing, radius, widths --------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius-sm:     4px;
  --radius-folder: 6px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-xl:     16px;
  --radius-pill:   999px;

  --width-prose:   640px;
  --width-content: 960px;
  --width-app:     1200px;

  /* ---- Motion -------------------------------------------------------- */
  /* Primitives only. There is deliberately no all-in-one transition token:
     composing per property keeps a reduced-motion guard precise and avoids
     animating layout. */
  --ease-standard: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast: 0.15s;
  --dur-base: 0.2s;
  --dur-slow: 0.4s;

  /* ---- The desk lamp ------------------------------------------------- */
  /* One lamp sits above the top-left of the desk. Paper brightens toward it, edges facing it
     catch light, and every shadow falls down and to the right. The soft black glow belongs
     only on the dark Login page. */
  --lamp-angle: 165deg;   /* paper shading runs away from the lamp, down and slightly right */
  --edge-lit:   inset 1px 1px 0 rgba(255, 255, 255, 0.5), inset -1px -2px 0 rgba(69, 26, 3, 0.08);

  /* Everything that sits on something casts the lamp's shadow, sized by how thick it is.
     Everything on the folder lies flat under one faint shadow; only the thing under the pointer
     lifts, and a pressed button stamps flat. Wells you write in (text boxes, the drop zone) stay flat. */
  --shadow-desk:       6px 10px 20px rgba(0, 0, 0, 0.45);      /* the folder stack on the wooden desk */
  --shadow-folder:     2px 3px 5px rgba(69, 26, 3, 0.3);       /* the front folder on its back sheet */
  --shadow-sheet:      1px 1.5px 2px rgba(69, 26, 3, 0.14);    /* everything lying on the folder: sheets, cards, stickers, every button and toggle */
  /* The same lamp for dark paper: a faint shadow disappears beside the green's dark edge, so
     the green pieces cast a little farther and darker to look the same as cream */
  --shadow-sheet-dark: 1.5px 2px 3px rgba(69, 26, 3, 0.24);    /* green buttons, a toggle's chosen side, a tray's action */
  --shadow-paper-lift:3px 6px 4px rgba(69, 26, 3, 0.25);      /* raised: a hovered sticker or button, an open menu */
  /* A folder tab throws a thin shadow onto the tab to its right */
  --shadow-tab:        2px -1px 4px rgba(69, 26, 3, 0.16);

  /* Paper grain: a faint ink speckle over folder paper, drawn by the browser (no image file) */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.27 0 0 0 0 0.1 0 0 0 0 0.01 0.14 0 0 0 -0.04'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}