/* 
 * DESIGN TOKENS - CSS Custom Properties
 * 
 * Nor Sanavongsay - Brand System
 * 
 * Available tokens for use throughout the application:
 * - Colors: Signal Yellow, the gray scale, Deep Red, base colors (--white, --black) and their alpha steps
 * - Typography: --font-sans (Inter), --font-serif (Fraunces/Ivy Journal/Canela), --font-heading (small headings), --font-display (Bigshot One, big headings), --font-quote (Trocchi, blockquotes)
 * 
 * Usage: color: var(--gray-700); font-family: var(--font-sans);
 */
:root {
  /* Typography - Nor's Brand System */
  --font-sans: 'Inter', 'Source Sans 3', system-ui, sans-serif;
  --font-serif: 'Fraunces', 'Ivy Journal', 'Canela', Georgia, serif;
  --font-heading: var(--font-sans); /* Smaller headings (h3 to h6), titles, labels */
  --font-display: 'Bigshot One', Georgia, serif; /* Big headings (h1, h2). One weight only: keep at 400 */
  --font-quote: 'Trocchi', Georgia, serif;  /* Blockquotes. Regular 400 only, no italic */
  
  /* Light Theme Color Palette */
  --background-primary: #fafafa;    /* Off-white background like the example */
  --background-secondary: #ffffff;   /* Pure white for cards/panels */
  --background-tertiary: #F0F0F3;    /* Flat gray for tiles (a step off the page background) */
  --text-primary: #1a1a1a;          /* Very dark charcoal for headlines */
  --text-secondary: #404040;        /* Medium dark for body text */
  --text-muted: #737373;            /* Gray for secondary text/dates */
  --signal-yellow: #FFD23F;         /* Keep yellow for highlights and CTAs */
  --border-dark: var(--gray-500);          /* Light borders */
  --border-medium: var(--gray-400);          /* Light borders */
  --border-light: var(--gray-200);          /* Light borders */
  --deep-red: #B22222;              /* Keep for emphasis */
  
  /* Gray scale based on rebel black */
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;
  
  /* Brand color aliases for consistency */
  --primary-50: #fff8e1;
  --primary-100: #ffefb3;
  --primary-200: #ffe082;
  --primary-300: #ffd54f;
  --primary-400: var(--signal-yellow);
  --primary-500: #E6BD39;  /* Slightly darker signal yellow */
  --primary-600: #CCAA33;  /* 2.2:1 contrast on white */
  --primary-700: #B3972C;  /* 2.9:1 contrast on white */
  --primary-800: #998426;  /* 3.7:1 contrast on white */
  --primary-900: #807120;  /* 4.9:1 contrast on white */
  --link-color: var(--signal-yellow);  /* link underline (matches the primary button) */
  --link-hover-color: var(--text-primary);  /* link underline on hover; the text color never changes */

  /* Base colors for surfaces, text on dark, and shadows */
  --white: #ffffff;
  --black: #000000;
  --slate: #0F172A;                  /* cool tint for soft art shadows */

  /* Home tile gradients (top-down bluish grays, Apple-style) */
  --tile-pebble: #E9EDF2;
  --tile-pebble-end: #F7F8FA;
  --tile-mist: #D5E3EE;
  --tile-mist-end: #F2F6F9;
  --tile-ink-bg: var(--black);
  --tile-ink-bg-end: #1C1C1E;
  --tile-dusk: #C9D2DD;               /* deeper bluish gray, holds its own next to the sun tile */
  --tile-dusk-end: #EDF0F4;
  --tile-prism-rose: #FBDDE3;          /* light rainbow hues for the prism tile */
  --tile-prism-peach: #FDE8CF;
  --tile-prism-lemon: #FBF3C8;
  --tile-prism-mint: #D9F2E3;
  --tile-prism-sky: #D6E9F8;
  --tile-prism-lilac: #E5DDF7;
  --ai-gradient: conic-gradient(var(--border-light) 0 55%, #4F8CFF 70%, #A66CFF 80%, #FF6CB5 90%, #FFB86C 100%); /* AI glow: a light that travels around app cards */
  --tile-sun: var(--primary-200);      /* soft yellow, top-down */
  --tile-sun-end: var(--primary-50);

  /* Status surfaces */
  --status-success-bg: #ecfdf5;
  --status-success-border: var(--available-200);
  --status-error-bg: #fef2f2;
  --status-error-border: var(--accent-200);

  /* Alpha steps of the base colors (overlays, glass, tints, shadows) */
  --black-a3: color-mix(in srgb, var(--black) 3%, transparent);
  --black-a5: color-mix(in srgb, var(--black) 5%, transparent);
  --black-a8: color-mix(in srgb, var(--black) 8%, transparent);
  --black-a10: color-mix(in srgb, var(--black) 10%, transparent);
  --black-a12: color-mix(in srgb, var(--black) 12%, transparent);
  --black-a15: color-mix(in srgb, var(--black) 15%, transparent);
  --black-a30: color-mix(in srgb, var(--black) 30%, transparent);
  --black-a40: color-mix(in srgb, var(--black) 40%, transparent);
  --black-a50: color-mix(in srgb, var(--black) 50%, transparent);
  --black-a55: color-mix(in srgb, var(--black) 55%, transparent);
  --black-a60: color-mix(in srgb, var(--black) 60%, transparent);
  --black-a80: color-mix(in srgb, var(--black) 80%, transparent);
  --green-a15: color-mix(in srgb, var(--available-500) 15%, transparent);
  --mist-a85: color-mix(in srgb, var(--tile-mist) 85%, transparent);
  --mist-a97: color-mix(in srgb, var(--tile-mist) 97%, transparent);
  --pebble-a85: color-mix(in srgb, var(--tile-pebble) 85%, transparent);
  --pebble-a97: color-mix(in srgb, var(--tile-pebble) 97%, transparent);
  --slate-a8: color-mix(in srgb, var(--slate) 8%, transparent);
  --slate-a14: color-mix(in srgb, var(--slate) 14%, transparent);
  --slate-a18: color-mix(in srgb, var(--slate) 18%, transparent);
  --white-a14: color-mix(in srgb, var(--white) 14%, transparent);
  --white-a26: color-mix(in srgb, var(--white) 26%, transparent);
  --white-a60: color-mix(in srgb, var(--white) 60%, transparent);
  --white-a70: color-mix(in srgb, var(--white) 70%, transparent);
  --white-a72: color-mix(in srgb, var(--white) 72%, transparent);
  --white-a90: color-mix(in srgb, var(--white) 90%, transparent);
  --white-a95: color-mix(in srgb, var(--white) 95%, transparent);
  --white-a98: color-mix(in srgb, var(--white) 98%, transparent);
  --yellow-a15: color-mix(in srgb, var(--signal-yellow) 15%, transparent);
  --yellow-a20: color-mix(in srgb, var(--signal-yellow) 20%, transparent);
  --yellow-a30: color-mix(in srgb, var(--signal-yellow) 30%, transparent);
  --yellow-a40: color-mix(in srgb, var(--signal-yellow) 40%, transparent);
  --yellow-a95: color-mix(in srgb, var(--signal-yellow) 95%, transparent);
  
  /* Secondary colors (support greys) */
  --secondary-50: #f5f5f5;
  --secondary-100: #e8e8e8;
  --secondary-200: #d1d1d1;
  --secondary-300: #b3b3b3;
  --secondary-400: var(--gray-400);
  --secondary-500: #808080;
  --secondary-600: #666666;
  --secondary-700: var(--gray-700);
  --secondary-800: #262626;
  --secondary-900: #1a1a1a;
  
  /* Accent colors (deep red) */
  --accent-50: #fdf2f2;
  --accent-100: #fde8e8;
  --accent-200: #fecaca;
  --accent-300: #fca5a5;
  --accent-400: var(--deep-red);
  --accent-500: #a01c1c;
  --accent-600: #8b1616;
  --accent-700: #761111;
  --accent-800: #610d0d;
  --accent-900: #4c0a0a;
  
  /* Legacy colors (keeping for compatibility) */
  --blue-500: #33b7ff;
  --blue-600: #00a8ff;
  --blue-700: #0085cc;
  
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  
  /* Available/Status colors (green scale) */
  --available-50: #f0fdf4;
  --available-100: #dcfce7;
  --available-200: #bbf7d0;
  --available-300: #86efac;
  --available-400: #4ade80;
  --available-500: #22c55e;
  --available-600: #16a34a;
  --available-700: #15803d;
  --available-800: #166534;
  --available-900: #14532d;

  /* ============================================
   * SPACING SYSTEM (8px base, multiplier scale)
   * ============================================ */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px - tiny gaps */
  --space-2: 0.5rem;    /* 8px - base unit */
  --space-3: 0.75rem;   /* 12px - compact spacing */
  --space-4: 1rem;      /* 16px - default spacing */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px - comfortable spacing */
  --space-8: 2rem;      /* 32px - section spacing */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px - large spacing */
  --space-16: 4rem;     /* 64px - hero spacing */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */
  
  /* ============================================
   * TYPOGRAPHY SCALE (modular scale 1.25)
   * ============================================ */
  --text-2xs: 0.625rem;    /* 10px - tiny labels */
  --text-xs: 0.75rem;      /* 12px - small labels */
  --text-sm: 0.875rem;     /* 14px - UI text */
  --text-base: 1rem;       /* 16px - body text */
  --text-lg: 1.125rem;     /* 18px - lead text */
  --text-xl: 1.25rem;      /* 20px - H5 */
  --text-2xl: 1.5rem;      /* 24px - H4 */
  --text-3xl: 1.875rem;    /* 30px - H3 */
  --text-4xl: 2.25rem;     /* 36px - H2 */
  --text-5xl: 3rem;        /* 48px - H1 */
  --text-6xl: 3.75rem;     /* 60px - Display */
  --text-7xl: 4.5rem;      /* 72px - Hero */

  /* Heading scale: each level is the one above divided by the golden ratio */
  --type-ratio: 1.618;
  --h1-size: calc(3rem + 1vw);                          /* page titles: ~52px on phones, ~62px at 1440 */
  --h2-size: calc(var(--h1-size) / var(--type-ratio));  /* ~32px to ~39px */
  --h3-size: calc(var(--h2-size) / var(--type-ratio));  /* ~20px to ~24px */
  --h4-size: var(--text-base);                          /* same as body text */
  --h5-size: var(--text-sm);                            /* subtext size */
  
  /* Line heights for each size */
  --leading-2xs: 0.75rem;
  --leading-xs: 1rem;
  --leading-sm: 1.25rem;
  --leading-base: 1.5rem;
  --leading-lg: 1.75rem;
  --leading-xl: 1.75rem;
  --leading-2xl: 2rem;
  --leading-3xl: 2.25rem;
  --leading-4xl: 2.5rem;
  --leading-5xl: 1;
  --leading-6xl: 1;
  --leading-7xl: 1;
  
  /* ============================================
   * SIZING SYSTEM
   * ============================================ */
  --size-0: 0;
  --size-px: 1px;
  --size-0-5: 0.125rem;  /* 2px */
  --size-1: 0.25rem;     /* 4px */
  --size-2: 0.5rem;      /* 8px */
  --size-3: 0.75rem;     /* 12px */
  --size-4: 1rem;        /* 16px */
  --size-5: 1.25rem;     /* 20px */
  --size-6: 1.5rem;      /* 24px */
  --size-8: 2rem;        /* 32px */
  --size-10: 2.5rem;     /* 40px */
  --size-12: 3rem;       /* 48px */
  --size-14: 3.5rem;     /* 56px */
  --size-16: 4rem;       /* 64px */
  --size-20: 5rem;       /* 80px */
  --size-24: 6rem;       /* 96px */
  --size-32: 8rem;       /* 128px */
  --size-40: 10rem;      /* 160px */
  --size-48: 12rem;      /* 192px */
  --size-56: 14rem;      /* 224px */
  --size-64: 16rem;      /* 256px */
  
  /* ============================================
   * BORDER RADIUS
   * ============================================ */
  --radius-none: 0;
  --radius-sm: 0.125rem;    /* 2px */
  --radius-base: 0.5rem;    /* 8px */
  --radius-md: 1rem;        /* 16px */
  --radius-lg: 1.5rem;      /* 24px */
  --radius-xl: 2rem;        /* 32px */
  --radius-2xl: 2.5rem;     /* 40px */
  --radius-3xl: 3rem;       /* 48px */
  --radius-full: 9999px;    /* pills/circles */

  /* Semantic radius: components use these, not the scale above */
  --radius-control: var(--radius-base);  /* buttons, inputs, chips */
  --radius-surface: var(--radius-lg);    /* tiles, cards, panels, images */
  --radius-app-icon: 22.37%;              /* iOS app icon corner, relative to icon size */
  
  /* ============================================
   * BORDER WIDTHS
   * ============================================ */
  --border-0: 0;
  --border-1: 1px;
  --border-2: 2px;
  --border-4: 4px;
  --border-8: 8px;
  
  /* ============================================
   * SHADOWS (elevation levels)
   * ============================================ */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-float: 0 8px 32px var(--black-a12), 0 2px 8px var(--black-a8);   /* floating header and phone nav */
  --shadow-header: 0 4px 24px var(--black-a8), 0 1px 3px var(--black-a12);  /* desktop header when floating */
  --shadow-lift: 0 8px 24px var(--slate-a8);   /* card hover */
  --shadow-art: 0 18px 30px var(--slate-a18);  /* drop-shadow() for product art */
  --shadow-art-md: 0 14px 24px var(--slate-a14);
  --shadow-art-sm: 0 8px 16px var(--slate-a14);
  
  /* ============================================
   * Z-INDEX LAYERS
   * ============================================ */
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-overlay: 100;
  --z-modal: 200;
  --z-popover: 300;
  --z-tooltip: 400;
  --z-max: 9999;
  
  /* ============================================
   * TRANSITIONS
   * ============================================ */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-slower: 500ms ease;
  
  /* ============================================
   * BREAKPOINTS (for reference in JS)
   * ============================================ */
  --screen-sm: 640px;
  --screen-md: 768px;
  --screen-lg: 1024px;
  --screen-xl: 1280px;
  --screen-2xl: 1536px;
}