/**
 * Design Tokens — Portfolio Design System
 * Single source of truth for all visual properties.
 * Loaded before main.css; overridden by theme_variables.html for admin-configurable values.
 */

:root {
  /* ========================================================
     COLOR PALETTE
     ======================================================== */

  /* Brand */
  --color-accent:       #ff6b35;
  --color-accent-hover: color-mix(in srgb, var(--color-accent), black 15%);
  --color-accent-light: color-mix(in srgb, var(--color-accent), transparent 90%);
  --color-accent-mid:   color-mix(in srgb, var(--color-accent), transparent 70%);
  --color-secondary:    #ff8c42;

  /* Backgrounds & Surfaces */
  --color-bg:       #1a1410;
  --color-surface:  #251f14;
  --color-surface-hover: color-mix(in srgb, var(--color-surface), white 6%);

  /* Text */
  --color-text:     #f7f2e7;
  --color-heading:  #ffffff;
  --color-contrast: #ffffff;
  --color-muted:    color-mix(in srgb, var(--color-text), transparent 28%);

  /* Borders */
  --color-border:       color-mix(in srgb, var(--color-text), transparent 88%);
  --color-border-hover: color-mix(in srgb, var(--color-text), transparent 75%);

  /* Navigation */
  --color-nav:                #ffffff;
  --color-nav-hover:          var(--color-accent);
  --color-nav-mobile-bg:      color-mix(in srgb, var(--color-bg), white 12%);
  --color-nav-dropdown-bg:    color-mix(in srgb, var(--color-bg), black 20%);
  --color-nav-dropdown:       var(--color-text);
  --color-nav-dropdown-hover: var(--color-accent);

  /* Semantic / Status */
  --color-success: #059652;
  --color-error:   #df1529;
  --color-warning: #ffc107;
  --color-info:    #17a2b8;

  /* ========================================================
     TYPOGRAPHY SCALE
     Major third (1.25), base 16px
     ======================================================== */

  /* Sizes */
  --text-xs:   0.75rem;     /*  12px — metadata, timestamps */
  --text-sm:   0.8125rem;   /*  13px — captions, small labels */
  --text-base: 1rem;        /*  16px — body text */
  --text-md:   1.125rem;    /*  18px — lead paragraphs */
  --text-lg:   1.25rem;     /*  20px — card titles, h4 */
  --text-xl:   1.5rem;      /*  24px — h3, section subtitles */
  --text-2xl:  2rem;        /*  32px — h2, section headers */
  --text-3xl:  2.5rem;      /*  40px — h1, page titles */
  --text-4xl:  3.5rem;      /*  56px — hero display */
  --text-hero: clamp(2.5rem, 5vw, 3.5rem); /* responsive hero */

  /* Weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* Line heights */
  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* Letter spacing */
  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.12em;

  /* ========================================================
     SPACING SCALE
     4px base unit
     ======================================================== */

  --space-1:   0.25rem;   /*   4px */
  --space-2:   0.5rem;    /*   8px */
  --space-3:   0.75rem;   /*  12px */
  --space-4:   1rem;      /*  16px */
  --space-6:   1.5rem;    /*  24px */
  --space-8:   2rem;      /*  32px */
  --space-10:  2.5rem;    /*  40px */
  --space-12:  3rem;      /*  48px */
  --space-16:  4rem;      /*  64px */
  --space-20:  5rem;      /*  80px */
  --space-24:  6rem;      /*  96px */

  --section-padding: var(--space-16);  /* default section vertical padding */

  /* ========================================================
     BORDER RADIUS
     ======================================================== */

  --radius-sm:   4px;      /* tags, badges, code blocks */
  --radius-md:   8px;      /* buttons, inputs, thumbnails, small cards */
  --radius-lg:   12px;     /* standard cards, modals */
  --radius-xl:   20px;     /* hero images, large cards */
  --radius-pill:  9999px;  /* pills, tags */
  --radius-full:  50%;     /* avatars, icon circles */

  /* ========================================================
     GLASS / SURFACE
     ======================================================== */

  --glass-bg:           color-mix(in srgb, var(--color-surface), transparent 36%);
  --glass-bg-hover:     color-mix(in srgb, var(--color-surface-hover), transparent 24%);
  --glass-border:       color-mix(in srgb, var(--color-accent), transparent 84%);
  --glass-border-hover: color-mix(in srgb, var(--color-accent), transparent 62%);
  --glass-blur:         blur(14px);
  --glass-shadow:       0 16px 42px rgba(0, 0, 0, 0.18);

  /* ========================================================
     SHADOWS
     ======================================================== */

  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md:    0 5px 15px rgba(0, 0, 0, 0.10);
  --shadow-lg:    0 10px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl:    0 20px 40px rgba(0, 0, 0, 0.16);
  --shadow-glow:  0 8px 25px color-mix(in srgb, var(--color-accent), transparent 70%);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-accent), transparent 60%);

  /* ========================================================
     TRANSITIONS & ANIMATION
     ======================================================== */

  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;

  --transition-base:  var(--duration-normal) var(--ease-default);
  --transition-fast:  var(--duration-fast) var(--ease-default);
  --transition-slow:  var(--duration-slow) var(--ease-default);

  /* ========================================================
     OPACITY SCALE
     ======================================================== */

  --opacity-muted:    0.72;
  --opacity-disabled: 0.5;
  --opacity-overlay:  0.8;

  /* ========================================================
     Z-INDEX SCALE
     ======================================================== */

  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;
}

/* ========================================================
   RESPONSIVE TOKEN OVERRIDES
   ======================================================== */

@media (max-width: 768px) {
  :root {
    --section-padding: var(--space-12);  /* 48px on mobile */
  }
}