/* ==========================================================================
   Inkwell design tokens
   --------------------------------------------------------------------------
   One spacing scale, one type scale, one stroke scale, one roughness, one
   easing curve, a few durations. Nothing below is a magic number: every rule
   in every other stylesheet references a token from this file.
   ========================================================================== */

:root {
  /* --- Paper and ink ---------------------------------------------------- */
  --paper:        #FBF7EF;   /* warm off-white ground */
  --paper-deep:   #F3EDE1;   /* slightly darker sheet, for insets */
  --paper-lift:   #FFFDF9;   /* raised scrap, cards */
  --ink:          #22252E;   /* soft blue-black pen */
  --ink-soft:     #4A4F5C;   /* secondary writing */
  --pencil:       #7A7F8A;   /* pencil-gray, metadata */

  /* --- Marker accents (used sparingly, like a highlighter) -------------- */
  --marker-yellow: #FFD84D;
  --marker-coral:  #FF7A6B;
  --marker-mint:   #7ED9B5;
  --marker-sky:    #8EC5FF;

  /* --- Semantic status ------------------------------------------------- */
  --status-online:  #4FA97A;
  --status-offline: var(--pencil);
  --status-error:   #D9534F;
  --status-pending: #C9922E;

  /* --- Lines ------------------------------------------------------------ */
  --line:        var(--ink);
  --line-faint:  rgba(34, 37, 46, 0.18);
  --line-shadow: rgba(34, 37, 46, 0.14);  /* the offset "pencil shadow" */

  /* --- Spacing scale (4 / 8 / 12 / 16 / 24 / 32 / 48) ------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* --- Type scale ------------------------------------------------------- */
  --fs-xs:   0.8125rem;  /* 13px — captions, tags */
  --fs-sm:   0.9375rem;  /* 15px — metadata, dense tables */
  --fs-base: 1.0625rem;  /* 17px — body, comfortable on phones */
  --fs-lg:   1.25rem;    /* 20px */
  --fs-xl:   1.5rem;     /* 24px */
  --fs-2xl:  1.875rem;   /* 30px */
  --fs-3xl:  2.25rem;    /* 36px */
  --fs-4xl:  3rem;       /* 48px */

  --lh-tight: 1.2;
  --lh-snug:  1.4;
  --lh-body:  1.6;       /* generous, as the brief requires */

  --fw-normal: 400;
  --fw-medium: 600;
  --fw-bold:   700;

  /* Handwriting faces read small, so headings step up a size. */
  --font-hand:  'Caveat', 'Segoe Print', cursive;
  --font-body:  'Patrick Hand', 'Nunito', system-ui, sans-serif;
  --font-long:  'Nunito', system-ui, sans-serif;  /* long-form reading */
  /* Only for literal text the operator must copy exactly: env var names, IDs,
     tokens. A hand face would make those easy to misread. */
  --font-mono:  ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, Consolas, monospace;

  /* --- Stroke scale (1.5 / 2 / 2.5) ------------------------------------ */
  --stroke-thin:   1.5px;
  --stroke-base:   2px;
  --stroke-bold:   2.5px;
  --stroke-active: 3px;    /* focus / active redraw */

  /* --- Sketch character ------------------------------------------------- */
  --roughness:  1.6;   /* rough.js roughness; one value for the whole app */
  --bowing:     1.4;   /* how much lines bow outward */
  --radius-sm:     4px;
  --radius-wobble: 6px;

  /* --- Rotation (decorative only: cards, notes, tape — never controls) -- */
  --tilt-a: -0.6deg;
  --tilt-b:  0.5deg;
  --tilt-c: -0.3deg;
  --tilt-d:  0.7deg;

  /* --- Motion ----------------------------------------------------------- */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --dur-quick:  120ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
  --dur-draw:   520ms;   /* stroke-dashoffset draw-in */
  --dur-draw-slow: 700ms;
  --stagger:    60ms;

  /* --- Layout ----------------------------------------------------------- */
  --shell-max:    1100px;
  --sidebar-w:    240px;
  --tabbar-h:     64px;
  --tap-min:      44px;   /* minimum touch target */
  --focus-w:      3px;

  /* --- Sound ------------------------------------------------------------ */
  --sound-volume: 0.22;

  /* --- Grain ------------------------------------------------------------ */
  --grain-opacity: 0.04;
}

/* --------------------------------------------------------------------------
   Dark mode: the chalkboard. Same accents, inverted ground.
   -------------------------------------------------------------------------- */
[data-theme='dark'] {
  --paper:        #1C2321;   /* deep green-black chalkboard */
  --paper-deep:   #161C1A;
  --paper-lift:   #232B28;
  --ink:          #EDEDE6;   /* chalk white */
  --ink-soft:     #C3C7C0;
  --pencil:       #8D968F;

  --line:        var(--ink);
  --line-faint:  rgba(237, 237, 230, 0.20);
  --line-shadow: rgba(237, 237, 230, 0.12);

  --status-online:  #7ED9B5;
  --status-error:   #FF8F86;

  /* Accents hold on the dark ground; chalk reads as the line. */
  --marker-yellow: #FFD84D;
  --marker-coral:  #FF8F86;
  --marker-mint:   #7ED9B5;
  --marker-sky:    #8EC5FF;

  --grain-opacity: 0.05;
}