/* gohary brand tokens · v1 · 4 Oct 2026
   Signal Vermilion is the only brand color. Everything else is support.
   Fonts: Space Grotesk 700 (headings), Readex Pro (body, buttons, all Arabic), JetBrains Mono (labels, numbers). */

:root {
  /* Preferred text emphasis: adjust against actual glyphs to cover their lower half. */
  --half-marker-top: 54%;
  --half-marker-bottom: 94%;
  /* Line/arrow draw-on starting duration; animate stroke-dashoffset, not only the whole shape. */
  --line-draw-duration: 600ms;
  --line-draw-easing: cubic-bezier(.65,0,.35,1);
  /* Approved paper dots: web size; scale all lengths 2.5x for 1080-wide video. */
  --paper-dot-color: var(--neutral-200);
  --paper-dot-radius: 1.25px;
  --paper-dot-edge: 1.35px;
  --paper-dot-spacing: 19.2px;
  /* ---------- Primitives ---------- */
  --vermilion-50:  #FCEFEA;
  --vermilion-100: #F6DCD3;
  --vermilion-300: #FF6B4F; /* accent on dark, spoken caption word */
  --vermilion-500: #E4472B; /* brand */
  --vermilion-700: #B8321A; /* text on light, hover */
  --vermilion-900: #7A2412; /* pressed */

  --neutral-0:   #FFFFFF;
  --neutral-50:  #F4F1EA; /* paper, brand */
  --neutral-100: #EAE6DD;
  --neutral-200: #D9D4C9;
  --neutral-400: #A29D93;
  --neutral-500: #8F8A80; /* diagram "other side" */
  --neutral-600: #5E5B55;
  --neutral-800: #2A2826;
  --neutral-900: #1E1D1B;
  --neutral-950: #141414; /* ink, brand */

  --red-500:   #D92D20;
  --red-300:   #F97066;
  --green-600: #2F7D4E;
  --green-300: #7FC79A;
  --amber-700: #8A5A0B;
  --amber-400: #F0B34A;
  --blue-600:  #3E6E9E; /* info status only */
  --blue-300:  #8DB3DA;

  /* ---------- Semantic · light (default) ---------- */
  --color-bg:             var(--neutral-50);
  --color-surface:        var(--neutral-0);
  --color-surface-2:      var(--neutral-100);
  --color-border:         var(--neutral-200);
  --color-border-strong:  var(--neutral-400);
  --color-text:           var(--neutral-950);
  --color-text-muted:     var(--neutral-600);
  --color-text-subtle:    var(--neutral-400);

  --color-accent:         var(--vermilion-500);
  --color-accent-text:    var(--vermilion-700); /* vermilion-500 is too light for small text */
  --color-accent-hover:   var(--vermilion-700);
  --color-accent-pressed: var(--vermilion-900);
  --color-on-accent:      var(--neutral-950); /* ink on vermilion: white fails contrast */
  --color-on-accent-dark: var(--neutral-0);   /* text on hover/pressed */
  --color-accent-soft:    var(--vermilion-50);
  --color-accent-soft-fg: var(--vermilion-700);
  --color-focus-ring:     var(--vermilion-100);
  --color-link:           var(--vermilion-700);

  --color-disabled-bg:    var(--neutral-100);
  --color-disabled-fg:    var(--neutral-400);

  --color-diagram-a:      var(--vermilion-500);
  --color-diagram-b:      var(--neutral-500);
  --color-diagram-b-soft: var(--neutral-100);

  --color-error:          var(--red-500);
  --color-error-soft:     #FEF3F2;
  --color-error-border:   #F3C2BD;
  --color-success:        var(--green-600);
  --color-success-border: #CFE3D6;
  --color-warning:        var(--amber-700);
  --color-warning-fill:   var(--amber-400);
  --color-warning-border: #F1DDB5;
  --color-info:           var(--blue-600);
  --color-info-border:    #CFDCEA;

  /* ---------- Card style · A + C (thin line + quiet grey labels) ----------
     No slashes or hard offset shadows. Paper dots are approved outside cards. */
  --radius-card:   12px;
  --radius-inner:  8px;
  --radius-chip:   6px;
  --radius-button: 10px;
  --border-card:   1px solid var(--color-border);
  --shadow-card:   none;
  --label-font:    500 11px/1.4 var(--font-mono);
  --label-color:   var(--neutral-600);
  --label-color-video: var(--neutral-600);

  /* ---------- Type ---------- */
  --font-head: "Space Grotesk", "Readex Pro", sans-serif;
  --font-body: "Readex Pro", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* ---------- Semantic · dark (sections, overlays, lower-thirds) ---------- */
[data-theme="dark"] {
  --color-bg:             var(--neutral-950);
  --color-surface:        var(--neutral-900);
  --color-surface-2:      var(--neutral-800);
  --color-border:         #3A3734;
  --color-border-strong:  var(--neutral-600);
  --color-text:           var(--neutral-50);
  --color-text-muted:     var(--neutral-400);
  --color-text-subtle:    var(--neutral-600);

  --color-accent-text:    var(--vermilion-300); /* highlighted words, numbers */
  --color-link:           var(--vermilion-300);
  --color-accent-soft:    #3A1D16;
  --color-accent-soft-fg: var(--vermilion-300);
  --color-focus-ring:     #5A2416;
  --color-disabled-bg:    var(--neutral-800);
  --color-disabled-fg:    var(--neutral-600);

  --color-diagram-b:      var(--neutral-400);
  --color-diagram-b-soft: var(--neutral-800);

  --color-error:          var(--red-300);
  --color-success:        var(--green-300);
  --color-warning:        var(--amber-400);
  --color-info:           var(--blue-300);

  --color-overlay:        rgba(20, 20, 20, 0.88); /* lower-third plate on footage */
  --label-color:          var(--neutral-400);
  --label-color-video:    var(--neutral-400);
}