/* ===========================================================================
   OJT design tokens
   ---------------------------------------------------------------------------
   This file is the single source of truth for colour, type, space, shape,
   motion and touch. Components may only use these names — no literal hex, no
   magic numbers.

   Colours DERIVE from the runtime theme variables (--tblr-*), which are written
   onto <html> from the settings table at boot. That keeps the owner's chosen
   brand (preset "ocean", #0369a1 / #075985) authoritative, and it means a
   component restyle automatically follows whatever the admin picks in Settings.

   Contrast ratios were measured with the WCAG 2.1 relative-luminance formula
   against each token's base surface; only pairs >= 4.5:1 are used for text.
   =========================================================================== */

:root {
  /* ── Brand (follows the theme) ───────────────────────────────────────── */
  --ojt-primary:        var(--tblr-primary, #0369a1);         /* white on it 5.93:1 */
  --ojt-primary-hover:  var(--tblr-primary-dark, #02527e);    /* 7.56:1 */
  --ojt-primary-deep:   var(--tblr-accent, #075985);          /* 7.56:1 */
  --ojt-primary-soft:   var(--tblr-primary-light, #ebf3f7);
  --ojt-primary-tint:   var(--ojt-primary-light, #eff6ff);

  /* ── Surfaces ────────────────────────────────────────────────────────── */
  --ojt-page:           var(--tblr-bg, #f8fafc);
  --ojt-surface:        var(--tblr-bg-surface, #ffffff);
  --ojt-surface-alt:    var(--tblr-border-color-light, #f1f5f9);
  --ojt-sidebar:        var(--tblr-bg-sidebar, #0f172a);
  --ojt-sidebar-hover:  var(--tblr-bg-sidebar-hover, rgba(255, 255, 255, .06));
  --ojt-sidebar-active: var(--tblr-bg-sidebar-active, rgba(255, 255, 255, .10));

  /* ── Text ────────────────────────────────────────────────────────────── */
  --ojt-text:            var(--tblr-body-color, #0f172a);     /* 17.85:1 */
  --ojt-text-muted:      #475569;                             /*  7.58:1 */
  --ojt-text-subtle:     var(--tblr-muted, #64748b);          /*  4.76:1 — smallest legal text */
  --ojt-text-sidebar:    var(--tblr-sidebar-text, #cbd5e1);   /*  9.85:1 on #1e293b */
  --ojt-text-sidebar-muted: #94a3b8;   /* 4.6:1 on #0f172a */
  --ojt-text-sidebar-active: var(--tblr-sidebar-text-active, #ffffff);


  /* ── Semantic extras used by the component layer ─────────────────────── */
  --ojt-on-primary:     #ffffff;          /* text on the primary fill, 5.93:1 */
  --ojt-danger-hover:   #991b1b;          /* pressed danger, white on it 8.1:1 */
  --ojt-success-border: #a7f3d0;
  --ojt-warning-border: #fde68a;
  --ojt-danger-border:  #fecaca;
  --ojt-info-border:    #bfdbfe;
  --ojt-overlay-strong: rgba(15, 23, 42, .62);   /* caption bar over a live camera */
  --ojt-focus-ring:     rgba(3, 105, 161, .18);
  --ojt-control-ring:   rgba(100, 116, 139, .55);

  /* ── Borders ─────────────────────────────────────────────────────────── */
  --ojt-border:          var(--tblr-border-color, #e2e8f0);   /* dividers, decorative */
  --ojt-border-strong:   #cbd5e1;                             /* card edges, table rules */
  --ojt-border-input:    #64748b;                             /* 4.76:1 — perceivable control edge */

  /* ── Status: text-on-tint, every pair >= 4.5:1 ───────────────────────── */
  --ojt-success:     #047857;  --ojt-success-bg: #ecfdf5;     /* 5.21:1 */
  --ojt-warning:     #b45309;  --ojt-warning-bg: #fffbeb;     /* 4.84:1 */
  --ojt-danger:      #b91c1c;  --ojt-danger-bg:  #fef2f2;     /* 5.91:1 */
  --ojt-info:        #0369a1;  --ojt-info-bg:    #eff6ff;     /* 5.45:1 */
  --ojt-neutral:     #475569;  --ojt-neutral-bg: #f1f5f9;     /* 6.92:1 */

  /* ── Pending / locked treatment ──────────────────────────────────────────
     The locked-screen design: one amber family for "waiting on a reviewer".
     --ojt-pending is the label and badge text (5.0:1 on --ojt-pending-soft,
     and 9.7:1 on --ojt-pending-panel), so it is legal at 12px.            */
  --ojt-pending:        #b45309;
  --ojt-pending-soft:   #fef3c7;   /* badge fill                          */
  --ojt-pending-panel:  #fff9e6;   /* panel header, very pale amber       */
  --ojt-pending-tile:   #ffedd5;   /* document-icon tile                  */
  --ojt-pending-glyph:  #f97316;   /* document-icon glyph (decorative)    */
  --ojt-pending-strong: #f59e0b;   /* solid circle behind the lock, dot   */

  /* ── Type ────────────────────────────────────────────────────────────── */
  --ojt-font: var(--tblr-font, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif);
  --ojt-fs-xs:   .75rem;
  --ojt-fs-sm:   .8125rem;
  --ojt-fs-base: var(--tblr-font-size, .875rem);
  --ojt-fs-md:   1rem;
  --ojt-fs-lg:   1.25rem;
  --ojt-fs-xl:   1.5rem;
  --ojt-fs-2xl:  1.875rem;
  --ojt-lh-tight: 1.25;
  --ojt-lh-base:  1.5;
  --ojt-fw-regular: 400;
  --ojt-fw-medium:  500;
  --ojt-fw-bold:    600;

  /* ── Space (4px rhythm, inherited from the density preset) ───────────── */
  --ojt-1: .25rem;  --ojt-2: .5rem;  --ojt-3: .75rem;  --ojt-4: 1rem;
  --ojt-5: 1.25rem; --ojt-6: 1.5rem; --ojt-8: 2rem;    --ojt-10: 2.5rem;
  --ojt-12: 3rem;   --ojt-16: 4rem;

  /* ── Shape ───────────────────────────────────────────────────────────── */
  --ojt-radius-sm: 6px;
  --ojt-radius:    8px;
  --ojt-radius-lg: 12px;
  --ojt-radius-xl: 20px;   /* the locked-screen card */
  --ojt-radius-pill: 999px;

  --ojt-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --ojt-shadow:    0 1px 3px rgba(15, 23, 42, .08), 0 4px 12px rgba(15, 23, 42, .04);
  --ojt-shadow-lg: 0 8px 28px rgba(15, 23, 42, .12);

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --ojt-sidebar-w: 248px;
  --ojt-navbar-h:  var(--tblr-navbar-height, 56px);
  --ojt-gutter:    var(--ojt-6);
  --ojt-max:       1440px;

  /* ── Touch: the 44px floor. --tblr-tap is the legacy name. ───────────── */
  --ojt-tap: 44px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ojt-t-fast: 150ms;
  --ojt-t:      200ms;
  --ojt-ease:   cubic-bezier(.4, 0, .2, 1);

  /* ── Layers ──────────────────────────────────────────────────────────── */
  --ojt-z-sticky: 10;
  --ojt-z-navbar: 100;
  --ojt-z-drawer: 900;
  --ojt-z-modal:  1000;
  --ojt-z-toast:  1100;
}

@media (prefers-reduced-motion: reduce) {
  :root { --ojt-t-fast: 0ms; --ojt-t: 0ms; }
}