/* Design system tokens for the tinker renderer.
 *
 * Mirrors design-system/colors_and_type.css. Loaded after styles.css
 * in index.html so it extends the production :root block without
 * disturbing it. Keep in sync with the design-system bundle.
 */

:root {
  /* Typography — extension.
   *
   * Display is Fraunces (variable, with SOFT + WONK + opsz axes).
   * House setting dials SOFT high and WONK low so the face reads warm-paper
   * rather than brutalist. Reading face is Instrument Sans (400/500/600).
   * Plus Jakarta Sans + Inter stay in the fallback stack so the app keeps
   * a sensible face during the font rollout. Load both families via the
   * Google Fonts link in src/renderer/index.html. */
  --font-display: "Fraunces", "Plus Jakarta Sans", Georgia, "Times New Roman", serif;
  --font-sans:    "Instrument Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display-settings: "SOFT" 100, "WONK" 0, "opsz" 144;

  /* Action accent — extension */
  --color-accent-press: #4f46e5;

  /* Pastel rainbow — beginner brand expressive palette. */
  --color-rose:         #f9a8d4;   --color-rose-light:    #fdf2f8;
  --color-peach:        #fdba74;   --color-peach-light:   #fff7ed;
  --color-amber:        #fde68a;   --color-amber-light:   #fffbeb;
  --color-mint:         #6ee7b7;   --color-mint-light:    #ecfdf5;
  --color-sky:          #7dd3fc;   --color-sky-light:     #f0f9ff;
  --color-indigo:       #a5b4fc;   --color-indigo-light:  #eef2ff;
  --color-violet:       #c4b5fd;   --color-violet-light:  #f5f3ff;

  /* Rainbow-web logo aliases */
  --logo-pink:          #f9a8d4;
  --logo-orange:        #fdba74;
  --logo-yellow:        #fde68a;
  --logo-leaf:          #7bc47a;
  --logo-sky:           #7dd3fc;
  --logo-mint:          #6ee7b7;
  --logo-purple:        #c8b6e2;

  /* Semantic */
  --color-error-bg:     #fdf0eb;
  --color-error-border: #f0d3c5;
  --color-terracotta-light: #fdf0eb;
  --color-selection:    rgba(123, 196, 122, 0.32);

  /* Mono font */
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale */
  --text-display-lg: 38px;
  --text-display:    22px;
  --text-essay:      17px;
  --text-base:       15px;
  --text-body:       14px;
  --text-small:      13px;
  --text-micro:      11px;

  --leading-tight: 1.1;
  --leading-snug:  1.3;
  --leading-body:  1.55;
  --leading-prose: 1.7;

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:   0;
  --tracking-label:    0.06em;
  --tracking-crumb:    0.08em;

  /* Radii */
  --radius-pill:      999px;
  --radius-card:       12px;
  --radius-button:     10px;
  --radius-chip:        9px;
  --radius-icon:        8px;
  --radius-logo-tile:  44px;

  /* Shadow + focus extensions.
   *
   * House rule: shadows on buttons only. Cards, panels, modals, inputs,
   * and surfaces use borders (--color-border) and never lift.
   * --shadow-card is kept as a legacy alias but neutralized so existing
   * call sites don't break; new code should not reach for it.
   * Focus state is a halo (--focus-ring), not a shadow. */
  --shadow-card:         none;
  --shadow-button:       0 1px 0 rgba(45, 42, 38, 0.04), 0 1px 2px rgba(45, 42, 38, 0.06);
  --shadow-button-hover: 0 1px 0 rgba(45, 42, 38, 0.05), 0 2px 4px rgba(45, 42, 38, 0.08);
  --shadow-button-press: inset 0 1px 0 rgba(45, 42, 38, 0.06);
  --focus-ring:          0 0 0 4px rgba(99, 102, 241, 0.18);

  /* Motion: none. State changes are instant by design.
   * No --motion-* tokens exist. If you reach for a transition or an
   * animation timing, reconsider — the spirit of the app is "a quiet
   * place to be on the web," and nothing here performs. */

  /* Edge — mirrors design-system/colors_and_type.css. The right-triangle
   * that hugs the top-left of the welcome screen. Default fill is the
   * rainbow-web palette running along the hypotenuse (225deg). The
   * hypotenuse stays hard, and the LEFT edge stays solid too — flush
   * against the device's left bezel. Only the TOP edge fades
   * --edge-fade so the device status bar can't break continuity on
   * PWA. --edge-bleed extends the wedge up through the safe-area zone
   * on phones with a notch and resolves to 0 on desktop. Only the
   * welcome surface consumes these tokens today — see
   * .stage > .welcome.feed[data-active]::before in styles.css. */
  --edge-fill: linear-gradient(225deg,
                 rgba(255, 253, 247, 0.95) 0%,
                 var(--logo-pink)          8%,
                 var(--logo-orange)        22%,
                 var(--logo-yellow)        36%,
                 var(--logo-leaf)          50%,
                 var(--logo-mint)          63%,
                 var(--logo-sky)           76%,
                 var(--logo-purple)        100%);
  --edge-size:  clamp(140px, 22vw, 220px);
  --edge-fade:  160px;
  --edge-bleed: env(safe-area-inset-top, 0px);
  --edge-clip:  polygon(0 0, 100% 0, 0 100%);

  /* Edge mirror — the sidebar's top-right wedge. Mirrors the welcome
   * corner wedge across the sidebar/stage boundary. See
   * design-system/colors_and_type.css for the full docstring. */
  --edge-fill-mirror:  linear-gradient(135deg,
                         rgba(255, 253, 247, 0.95) 0%,
                         var(--logo-pink)          8%,
                         var(--logo-orange)        22%,
                         var(--logo-yellow)        36%,
                         var(--logo-leaf)          50%,
                         var(--logo-mint)          63%,
                         var(--logo-sky)           76%,
                         var(--logo-purple)        100%);
  --edge-clip-mirror:  polygon(0 0, 100% 0, 100% 100%);
  --edge-sidebar-size: 80px;

  /* Spacing */
  --space-1:  4px;
  --space-2:  6px;
  --space-3:  8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
}

/* Mobile mirror-wedge override — see design-system/colors_and_type.css. */
@media (max-width: 540px) {
  :root {
    --edge-sidebar-size: 60px;
  }
}