/**
 * @file        design-tokens.css
 * @description SynthetixMind brand identity + Skeuomorphic UI design tokens
 *              published as CSS custom properties (FR-VIS-02, FR-VIS-05).
 *              Source palette: docs/SMColorTheme.pdf
 *              Source language: docs/Skeuomorphic_UI.pdf
 *
 * @author      Thomas Dobler - SYNTHETIXMIND LTD
 * @email       tom@synthetixmind.com
 * @company     SYNTHETIXMIND LTD, Paphos, Cyprus
 * @url         https://synthetixmind.com
 *
 * @uid         9a3d4b27-c8e5-4f01-8d6a-7b13fe294c50
 * @version     0.0.0.1
 * @created     2026-05-28
 * @updated     2026-05-28
 *
 * @copyright   (c) 2026 by SYNTHETIXMIND LTD
 * @license     Proprietary — All rights reserved
 */

:root {
  /* ── SynthetixMind palette (FR-VIS-02) ─────────────────────────────────── */
  --sm-deep-navy:       #1C2C37;
  --sm-vibrant-orange:  #FA5800;
  --sm-deep-mahogany:   #6B2D19;
  --sm-warm-beige:      #EADDD3;
  --sm-soft-white:      #F2F4F6;

  /* Semantic role aliases */
  --color-bg-page:        var(--sm-warm-beige);
  --color-bg-surface:     var(--sm-soft-white);
  --color-bg-elevated:    var(--sm-deep-navy);
  --color-text-strong:    var(--sm-deep-navy);
  --color-text-on-dark:   var(--sm-soft-white);
  --color-text-muted:     #4A5C6B;
  --color-accent-primary: var(--sm-vibrant-orange);
  --color-accent-secondary: var(--sm-deep-mahogany);

  /* Status colours (paired with LED gradient backgrounds) */
  --color-success:        #2E7D32;
  --color-warning:        #B8860B;
  --color-error:          #C62828;

  /* ── Typography ────────────────────────────────────────────────────────── */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;

  --fs-display-xl: 56px;
  --fs-display-lg: 40px;
  --fs-display-md: 32px;
  --fs-heading-lg: 26px;
  --fs-heading-md: 22px;
  --fs-heading-sm: 18px;
  --fs-body-lg:    16px;
  --fs-body:       14px;
  --fs-micro:      12px;

  --lh-tight:      1.2;
  --lh-snug:       1.35;
  --lh-normal:     1.5;
  --lh-loose:      1.65;

  /* ── Spacing (8px base) ────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Radii ─────────────────────────────────────────────────────────────── */
  --radius-button: 6px;
  --radius-card:   8px;
  --radius-pill:   999px;
  --radius-knob:   50%;

  /* ── Skeuomorphic surface recipes (FR-VIS-01) ──────────────────────────── */
  --shadow-press-rest:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 3px 0 var(--sm-deep-mahogany),
    0 6px 10px rgba(28, 44, 55, 0.30);
  --shadow-press-down:
    inset 0 1px 2px rgba(0, 0, 0, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10);
  --shadow-card:
    0 1px 0 rgba(255, 255, 255, 0.40),
    0 6px 14px rgba(28, 44, 55, 0.22);
  --shadow-card-hover:
    0 1px 0 rgba(255, 255, 255, 0.40),
    0 10px 22px rgba(28, 44, 55, 0.28);
  --shadow-bezel-inset:
    inset 0 0 0 1px rgba(0, 0, 0, 0.25),
    inset 0 2px 4px rgba(0, 0, 0, 0.20);
  --shadow-led-glow:
    inset 0 1px 1px rgba(0, 0, 0, 0.40),
    0 0 6px currentColor;

  /* Surface gradients */
  --grad-cta-rest:    linear-gradient(180deg, #FF6B14 0%, #FA5800 60%, #D04600 100%);
  --grad-cta-active:  linear-gradient(180deg, #D04600 0%, #B53D00 100%);
  --grad-warm-button: linear-gradient(180deg, #F5ECE2 0%, #EADDD3 50%, #D9C9BB 100%);
  --grad-nav-rail:    linear-gradient(180deg, #243341 0%, #1C2C37 100%);
  --grad-brass-knob:  radial-gradient(circle at 30% 30%, #FFE4B0 0%, #C49256 55%, #6B2D19 100%);

  /* Texture URLs (SVG; FR-VIS-05) */
  --tex-paper:         url("../img/tex/paper-grain.svg");
  --tex-brushed-metal: url("../img/tex/brushed-metal.svg");
  --tex-wood:          url("../img/tex/wood-grain.svg");
  --tex-leather:       url("../img/tex/leather.svg");

  /* Motion */
  --motion-press:       60ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-toggle:      120ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-card-hover:  150ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-step-slide:  220ms cubic-bezier(0.2, 0, 0, 1);

  /* Z-index scale */
  --z-base:        1;
  --z-sticky:      10;
  --z-dropdown:    100;
  --z-overlay:     1000;
  --z-modal:       1100;
  --z-toast:       1200;
  --z-impersonation-banner: 1300;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-press:      0ms;
    --motion-toggle:     0ms;
    --motion-card-hover: 0ms;
    --motion-step-slide: 0ms;
  }
}