/* ==========================================================================
   AVREN — CANONICAL TOKEN LAYER
   --------------------------------------------------------------------------
   One source of truth for color, type, motion, radius, and elevation.
   Every Avren surface (marketing, product, docs) resolves from this file.

   ARCHITECTURE — two layers, and the distinction is load-bearing:

     1. RAW RAMPS      --terracotta-*, --stone-*  … a value, no opinion
     2. SEMANTIC ALIAS --text-primary, --accent   … a role, no hex

   Consumers use LAYER 2 ONLY. Nothing outside this file should reference a
   raw ramp step directly. That is what makes the palette re-tunable without
   a find-and-replace across every page.

   Accessibility rules are baked in, not applied afterward. See §7.

   Reconstructed from the Claude Design artboard. Values below are the ones
   Whitney approved; the semantic layer and the a11y corrections are new.
   ========================================================================== */

:root {

  /* ── 1. RAW RAMP · TERRACOTTA ─────────────────────────────────────────
     The single accent. Restraint is the brand — this ramp appears in small
     quantities against a lot of warm neutral, never as a field of color.   */

  --terracotta-50:  #FBF0EA;
  --terracotta-100: #F5DDD0;
  --terracotta-200: #EABFA9;
  --terracotta-300: #E08A5E;
  --terracotta-400: #D0714A;
  --terracotta-500: #C25E38;   /* brand accent — see §7, it cannot carry text */
  --terracotta-600: #A54D2C;
  --terracotta-700: #863E23;

  /* ── 2. RAW RAMP · WARM NEUTRAL (Paper → Ink) ────────────────────────── */

  --stone-50:  #FDFBF7;   /* Paper */
  --stone-100: #F5EFE6;
  --stone-150: #EFE9E1;   /* Sand */
  --stone-200: #E2DACD;
  --stone-300: #CDC3B2;
  --stone-400: #A99E8E;
  --stone-600: #6B6155;
  --stone-900: #241F19;   /* Ink */

  /* ── 3. RAW RAMP · STATUS ─────────────────────────────────────────────
     Reassuring, never alarming. These describe the state of a RECORD
     (saved, unlinked, exported) — never the state of a CLAIM.             */

  --green-100: #E3EDE2;  --green-600: #4F7A4A;  --green-700: #3E6139;
  --amber-100: #F6ECD8;  --amber-600: #9A6E22;  --amber-800: #6F4E19;
  --red-100:   #F6E2DE;  --red-600:   #A8442F;  --red-700:   #8A3626;
  --blue-100:  #E2E9EF;  --blue-600:  #4A6B85;  --blue-700:  #3A5670;

  /* ── 4. SEMANTIC · SURFACE ────────────────────────────────────────────
     Ground first, then things that sit on it, then the inverse world.     */

  --color-bg:             var(--stone-150);   /* app / page ground */
  --surface-card:         var(--stone-50);
  --surface-sunken:       var(--stone-100);
  --surface-raised:       var(--stone-50);
  --surface-inverse:      var(--stone-900);   /* the dark marketing world */
  --surface-accent-soft:  var(--terracotta-50);
  --surface-accent:       var(--terracotta-500);

  /* ── 5. SEMANTIC · TEXT ───────────────────────────────────────────────
     Every value below passes 4.5:1 on its intended ground. The intended
     ground is named. Using one off its ground is how contrast bugs happen. */

  --text-primary:      var(--stone-900);      /* on Paper / Sand — 13.6:1  */
  --text-secondary:    var(--stone-600);      /* on Paper / Sand —  5.0:1  */
  --text-muted:        var(--stone-600);      /* on Paper / Sand —  5.0:1  */
  --text-accent:       var(--terracotta-600); /* on Paper / Sand —  4.9:1  */
  --text-on-accent:    var(--stone-50);       /* on accent-interactive     */
  --text-placeholder:  var(--stone-600);

  /* Inverse world — text sitting on --surface-inverse. */
  --text-on-inverse:         var(--stone-100);      /* 14.3:1 */
  --text-secondary-inverse:  var(--stone-400);      /*  6.2:1 */
  --text-accent-inverse:     var(--terracotta-300); /*  6.2:1 */

  /* Decorative only. NEVER applied to anything a user must read — not
     placeholders, not timestamps, not helper text. */
  --text-decorative:   var(--stone-400);

  /* ── 6. SEMANTIC · BORDER & FOCUS ─────────────────────────────────── */

  --border-subtle:   var(--stone-200);
  --border-default:  var(--stone-300);
  --border-strong:   var(--stone-400);
  --border-accent:   var(--terracotta-200);

  --focus-ring:          var(--terracotta-700);  /* 3.4:1 on Paper */
  --focus-ring-inverse:  var(--terracotta-300);  /* 6.2:1 on Ink   */

  /* ── 7. SEMANTIC · ACCENT & INTERACTION ───────────────────────────────

     THE TERRACOTTA-500 RULE — the one thing to remember about this palette:

       terracotta-500 (#C25E38) never carries text and never receives text.

     Paper on 500 is 4.10:1. Ink on 500 is 3.85:1. It fails in BOTH
     directions — there is no text color that works on it. It is a fill for
     rules, dots, marks, and glows, and that is all.

     So interactive fills step off it:
       · on light grounds → 600 with Paper text          (5.5:1)
       · on dark grounds  → 300 with Ink text            (6.2:1)
       · hover on dark    → 400 with Ink text            (4.8:1)
     The gesture (darkens on press) survives; the failure doesn't.        */

  --accent:                    var(--terracotta-500);  /* marks & rules only */

  --accent-interactive:        var(--terracotta-600);
  --accent-interactive-hover:  var(--terracotta-700);
  --accent-interactive-press:  var(--terracotta-700);

  --accent-interactive-inverse:        var(--terracotta-300);
  --accent-interactive-inverse-hover:  var(--terracotta-400);
  --text-on-accent-inverse:            var(--stone-900);

  /* ── 8. SEMANTIC · STATUS ─────────────────────────────────────────── */

  --success:     var(--green-600);  --success-bg: var(--green-100);  --success-fg: var(--green-700);
  --warning:     var(--amber-600);  --warning-bg: var(--amber-100);  --warning-fg: var(--amber-800);
  --danger:      var(--red-600);    --danger-bg:  var(--red-100);    --danger-fg:  var(--red-700);
  --info:        var(--blue-600);   --info-bg:    var(--blue-100);   --info-fg:    var(--blue-700);

  /* ── 9. TYPE ──────────────────────────────────────────────────────────
     Hanken Grotesk does display and body both — the weight jump (800 vs
     400) carries the contrast, not a second family. Spline Sans Mono for
     metadata. Newsreader is reserved: it sets stated positions and the
     boundary statement, and nothing else. That reservation is the point —
     when the serif appears, Avren is saying something it stands behind.  */

  --font-sans:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'Spline Sans Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-serif:   'Newsreader', Georgia, 'Times New Roman', serif;

  --tracking-display: -0.035em;
  --tracking-heading: -0.02em;
  --tracking-eyebrow:  0.16em;

  /* ── 10. RADIUS ───────────────────────────────────────────────────── */

  --radius-sm:   6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-pill: 999px;

  /* ── 11. ELEVATION ────────────────────────────────────────────────────
     Warm shadows. A neutral grey shadow on a warm ground reads as dirt.  */

  --ring-hairline: inset 0 0 0 1px rgba(36, 31, 25, 0.07);
  --shadow-sm:  0 1px 2px rgba(36, 31, 25, 0.05), 0 2px 6px rgba(36, 31, 25, 0.04);
  --shadow-md:  0 2px 6px rgba(36, 31, 25, 0.06), 0 8px 20px rgba(36, 31, 25, 0.05);
  --shadow-lg:  0 4px 12px rgba(36, 31, 25, 0.07), 0 18px 44px rgba(36, 31, 25, 0.07);
  --shadow-xl:  0 8px 22px rgba(36, 31, 25, 0.09), 0 34px 80px rgba(36, 31, 25, 0.10);

  /* ── 12. MOTION ───────────────────────────────────────────────────────
     Slow-out easing. Nothing bounces — this product meets people on a bad
     day, and playful physics reads as unserious.                         */

  --dur-fast: .25s;
  --dur:      .5s;
  --dur-slow: .85s;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ── 13. GLOBAL FOCUS ───────────────────────────────────────────────────
   Solid ring, offset so it reads against any surface. Never removed.    */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
.on-inverse :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--focus-ring-inverse);
}

/* ── 14. REDUCED MOTION ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: .01ms; --dur: .01ms; --dur-slow: .01ms; }
}

/* ==========================================================================
   STANDING RULES FOR CONSUMERS

   1. Reference the semantic layer, never a raw ramp step.
   2. terracotta-500 never carries text and never receives text. (§7)
   3. --text-decorative is never applied to anything a user must read.
   4. Disabled controls are exempt from contrast minimums, but must never
      rely on contrast alone to signal that they are unavailable.
   5. Status tokens describe the state of a RECORD, never the state of a
      CLAIM. There is no token for "strong," "weak," "complete," or
      "sufficient," and none may be added.
   ========================================================================== */