/**
 * KITE SYSTEM — Design Tokens (light theme: pale palette tints on white)
 * Single source of truth for brand colors, typography, spacing, radii, shadows and layers.
 *
 * Brand: Kite Design Studio
 *   Red   #E01B28  (primary / logo)
 *   Amber #FBBA48  (highlight / review)
 *   Blue  #7BCBE3  (information / neutral tags)
 * Fonts: Poppins (interface), Sour Gummy (display / brand headings)
 */

@import url('fonts.css');

:root {
  /* ---------------------------------------------------------------
     Brand ramps (from the Kite palette: dark → light)
     --------------------------------------------------------------- */
  --kite-red-900: #7e1517;
  --kite-red-800: #941a1d;
  --kite-red-700: #a81a1f;
  --kite-red-600: #c31a21;
  --kite-red-500: #e01b28;   /* brand red */
  --kite-red-400: #e24d47;
  --kite-red-300: #eb6f69;
  --kite-red-200: #f09089;
  --kite-red-100: #f6b1b6;

  --kite-amber-700: #cb9638;
  --kite-amber-600: #d79f3e;
  --kite-amber-500: #eeb142;
  --kite-amber-400: #fbba48; /* brand amber */
  --kite-amber-300: #fac468;
  --kite-amber-200: #f9ce82;
  --kite-amber-100: #fadfae;

  --kite-blue-700: #12abe3;
  --kite-blue-600: #32b2e5;
  --kite-blue-500: #50b9e3;
  --kite-blue-400: #7bcbe3;  /* brand blue */
  --kite-blue-300: #98d6ea;
  --kite-blue-200: #afe0f0;
  --kite-blue-100: #c9e7f3;

  /* ---------------------------------------------------------------
     Neutral surfaces — LIGHT THEME (legacy names kept so components inherit)
     950 = page tint · 900 = card (white) · 850/800 = insets & hovers
     700-600 = borders/scroll · 500-50 = text-capable ink
     --------------------------------------------------------------- */
  --studio-950: #eef6fb;
  --studio-900: #ffffff;
  --studio-850: #f5f9fc;
  --studio-800: #e9f1f7;
  --studio-700: #d6e2ec;
  --studio-600: #bccad6;
  --studio-500: #94a3b1;
  --studio-400: #707d8b;
  --studio-300: #525e6c;
  --studio-200: #38424f;
  --studio-100: #232a34;
  --studio-50:  #141920;

  /* Pale palette tints used as backgrounds (from the Kite swatches) */
  --tint-blue:   #ddeff8;
  --tint-blue-soft: #eaf5fb;
  --tint-amber:  #fbe8c2;
  --tint-amber-soft: #fdf3dc;
  --tint-red:    #fadadd;
  --tint-red-soft: #fdeced;
  --tint-green:  #dcf3ea;

  /* ---------------------------------------------------------------
     Semantic accents
     --------------------------------------------------------------- */
  /* Primary: brand red (buttons, active navigation, focus) */
  --color-primary: var(--kite-red-500);
  --color-primary-hover: var(--kite-red-600);
  --color-primary-light: var(--kite-red-600);
  --color-primary-bg: rgba(224, 27, 40, 0.17);
  --color-primary-border: rgba(224, 27, 40, 0.42);

  /* Success (approved, active, live): the one non-brand hue, kept for meaning */
  --color-emerald: #22c58b;
  --color-emerald-light: #0d7a53;
  --color-emerald-bg: rgba(34, 197, 139, 0.17);
  --color-emerald-border: rgba(34, 197, 139, 0.38);

  /* Amber: review, pending, highlights, admin */
  --color-amber: var(--kite-amber-400);
  --color-amber-light: #8a5a05;
  --color-amber-bg: rgba(251, 186, 72, 0.17);
  --color-amber-border: rgba(251, 186, 72, 0.4);

  /* Rose: danger / urgent / errors — coral from the red ramp so it never
     reads as the solid brand-red primary action */
  --color-rose: var(--kite-red-300);
  --color-rose-light: #b4232c;
  --color-rose-bg: rgba(235, 111, 105, 0.17);
  --color-rose-border: rgba(235, 111, 105, 0.4);

  /* Sky: information, in-progress, neutral tags */
  --color-sky: var(--kite-blue-700);
  --color-sky-light: #0a73a0;
  --color-sky-bg: rgba(18, 171, 227, 0.17);
  --color-sky-border: rgba(18, 171, 227, 0.4);

  /* Department / category tags: all drawn from the brand ramps */
  --color-purple: var(--kite-blue-500);        /* Media Production */
  --color-purple-light: #14719c;
  --color-purple-bg: rgba(80, 185, 227, 0.17);
  --color-purple-border: rgba(80, 185, 227, 0.4);

  --color-pink: var(--kite-red-400);           /* Branding */
  --color-pink-light: #b0302b;
  --color-pink-bg: rgba(226, 77, 71, 0.17);
  --color-pink-border: rgba(226, 77, 71, 0.4);

  --color-orange: var(--kite-amber-600);       /* BTL */
  --color-orange-light: #85590f;
  --color-orange-bg: rgba(215, 159, 62, 0.17);
  --color-orange-border: rgba(215, 159, 62, 0.42);

  --color-cyan: var(--kite-blue-300);          /* Web Development */
  --color-cyan-light: #2f7690;
  --color-cyan-bg: rgba(152, 214, 234, 0.17);
  --color-cyan-border: rgba(152, 214, 234, 0.38);

  /* ---------------------------------------------------------------
     Text & surface tokens
     --------------------------------------------------------------- */
  --text-strong: #14181e;   /* headings, names */
  --text-main: #1f252d;
  --text-muted: #525b68;
  --text-dim: #6c7684;
  --text-dark: #0a0b0d;
  --on-brand: #ffffff;      /* text on saturated brand fills */

  --bg-page: var(--studio-950);
  --bg-card: var(--studio-900);
  --bg-card-hover: var(--studio-850);
  --bg-card-inset: var(--studio-850);
  --bg-glass: #ffffff;
  --surface-translucent: #f8fafc;
  --border-subtle: rgba(24, 48, 72, 0.10);
  --border-medium: rgba(24, 48, 72, 0.20);
  --border-active: rgba(224, 27, 40, 0.55);

  /* App background: pale blue with amber + red washes (palette tints) */
  --bg-app: #f3f5f8;

  /* ---------------------------------------------------------------
     Typography
     Poppins carries the UI; Sour Gummy carries headings and brand text.
     Latin-only webfonts: Arabic falls back to the system font.
     --------------------------------------------------------------- */
  --font-sans: 'Poppins', 'Segoe UI', Tahoma, 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Sour Gummy', 'Poppins', 'Segoe UI', Tahoma, 'Noto Sans Arabic', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, Menlo, monospace;

  --text-2xs: 0.6875rem; /* 11px */
  --text-xs: 0.78125rem; /* 12.5px: Poppins runs wide */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.375rem;   /* 22px */
  --text-2xl: 1.75rem;   /* 28px */
  --text-3xl: 2.125rem;  /* 34px */

  /* Spacing Scale */
  --space-0-5: 0.125rem; /* 2px */
  --space-1: 0.25rem;    /* 4px */
  --space-1-5: 0.375rem; /* 6px */
  --space-2: 0.5rem;     /* 8px */
  --space-2-5: 0.625rem; /* 10px */
  --space-3: 0.75rem;    /* 12px */
  --space-3-5: 0.875rem; /* 14px */
  --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 */

  /* Radii: softer, to match the rounded Sour Gummy letterforms */
  --radius-xs: 5px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
  --radius-full: 9999px;

  /* Shadows (soft, for light surfaces) */
  --shadow-sm: 0 1px 2px 0 rgba(24, 48, 72, 0.08);
  --shadow-md: 0 1px 3px rgba(24, 48, 72, 0.10);
  --shadow-lg: 0 4px 12px rgba(24, 48, 72, 0.10);
  --shadow-xl: 0 8px 24px rgba(24, 48, 72, 0.14);
  --shadow-glow-indigo: 0 0 0 3px rgba(224, 27, 40, 0.18); /* legacy name = brand focus ring */
  --shadow-glow-emerald: 0 0 0 3px rgba(34, 197, 139, 0.2);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-Index Hierarchy */
  --z-base: 1;
  --z-sticky: 10;
  --z-sidebar: 30;
  --z-header: 40;
  --z-drawer: 50;
  --z-modal-backdrop: 90;
  --z-modal: 100;
  --z-popover: 110;
  --z-toast: 120;
}