/**
 * @file         tokens.css
 * @version      1.0.0
 * @purpose      CSS custom properties (design tokens) for IncomingMedia Hub.
 *               All color, spacing, typography, border, shadow, and transition
 *               values live here. Components reference these tokens — never
 *               raw values — so the design system can be updated from one file.
 *
 *               Color palette:
 *                 Gold    #C9922A  — primary accent, DET PICS brand
 *                 Blue    #4A8FB8  — secondary accent, PictureMeClubbing brand
 *                 Near-black backgrounds with layered elevation
 *
 * @location     /public/assets/css/tokens.css
 * @last-updated 2026-03-19
 */

:root {
  /* ---- Brand accents ---- */
  --color-gold:          #C9922A;
  --color-gold-light:    #E0A83D;
  --color-gold-dark:     #A87520;
  --color-gold-muted:    rgba(201, 146, 42, 0.15);

  --color-blue:          #4A8FB8;
  --color-blue-light:    #5CA3CF;
  --color-blue-dark:     #357799;
  --color-blue-muted:    rgba(74, 143, 184, 0.15);

  /* ---- Semantic UI colors ---- */
  --color-success:       #4CAF7D;
  --color-success-bg:    rgba(76, 175, 125, 0.12);
  --color-error:         #E05252;
  --color-error-bg:      rgba(224, 82, 82, 0.12);
  --color-warning:       #E09A3A;
  --color-warning-bg:    rgba(224, 154, 58, 0.12);
  --color-info:          #4A8FB8;
  --color-info-bg:       rgba(74, 143, 184, 0.12);

  /* ---- Background layers (darkest to lightest) ---- */
  --bg-base:             #0b0b0b;   /* page background */
  --bg-raised:           #141414;   /* cards, panels */
  --bg-elevated:         #1c1c1c;   /* dropdowns, tooltips */
  --bg-overlay:          rgba(0, 0, 0, 0.72);  /* modal backdrop */

  /* ---- Borders ---- */
  --border-color:        rgba(255, 255, 255, 0.08);
  --border-color-mid:    rgba(255, 255, 255, 0.14);
  --border-color-strong: rgba(255, 255, 255, 0.22);
  --border-radius-sm:    4px;
  --border-radius:       8px;
  --border-radius-lg:    12px;
  --border-radius-pill:  9999px;

  /* ---- Text ---- */
  --text-primary:        #f0f0f0;
  --text-secondary:      #aaaaaa;
  --text-muted:          #666666;
  --text-inverse:        #0b0b0b;
  --text-link:           var(--color-gold);
  --text-link-hover:     var(--color-gold-light);

  /* ---- Typography ---- */
  --font-sans:           -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:           'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --text-xs:             0.75rem;    /* 12px */
  --text-sm:             0.875rem;   /* 14px */
  --text-base:           1rem;       /* 16px */
  --text-lg:             1.125rem;   /* 18px */
  --text-xl:             1.25rem;    /* 20px */
  --text-2xl:            1.5rem;     /* 24px */
  --text-3xl:            1.875rem;   /* 30px */

  --font-normal:         400;
  --font-medium:         500;
  --font-semibold:       600;
  --font-bold:           700;

  --leading-tight:       1.25;
  --leading-normal:      1.5;
  --leading-relaxed:     1.65;

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

  /* ---- Layout ---- */
  --content-width:       1200px;
  --content-padding:     clamp(1rem, 4vw, 2rem);

  --admin-sidebar-width: 220px;
  --admin-topbar-height: 56px;

  /* ---- Shadows ---- */
  --shadow-sm:           0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow:              0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg:           0 4px 20px rgba(0, 0, 0, 0.6);
  --shadow-gold:         0 0 0 2px rgba(201, 146, 42, 0.4);

  /* ---- Transitions ---- */
  --transition-fast:     120ms ease;
  --transition-base:     200ms ease;
  --transition-slow:     350ms ease;

  /* ---- Z-index scale ---- */
  --z-base:              1;
  --z-dropdown:          100;
  --z-sidebar:           200;
  --z-overlay:           300;
  --z-modal:             400;
  --z-toast:             500;

  /* ---- Gallery card ---- */
  --card-thumb-ratio:    56.25%;    /* 16:9 */
  --gallery-grid-min:    260px;
}