/* ============================================================
   MASTER DESIGN TOKENS
   ============================================================
   Single source of truth for ALL visual properties.

   HOW TO RESTYLE THIS APP:
     Edit values in this file → run: npm run css:build
     Every component, page, and layout updates automatically.

   TAILWIND BRIDGE:
     Every token here has a corresponding Tailwind utility in
     tailwind.config.js. Use the utility class — never the
     raw CSS variable directly in HTML.

     Token:             → Tailwind class
     --color-primary    → bg-primary / text-primary / border-primary
     --btn-height       → h-btn
     --max-width-app    → max-w-app
     --z-toast          → z-toast
   ============================================================ */

:root {

  /* ── Brand Colors ────────────────────────────────────────────────────────────
     Change these 5 lines to rebrand the entire app.           */
  --color-primary:          #15146a;    /* Main brand color     */
  --color-primary-hover:    #100f52;    /* Slightly darker      */
  --color-primary-active:   #0c0b3e;    /* Pressed / active     */
  --color-primary-border:   #100f52;    /* Border ~100 darker   */
  --color-on-primary:       #ffffff;    /* Text on brand bg     */

  /* Gradient stops — same hue family, slightly lighter endpoint
     gives the surface depth without leaving the brand.          */
  --color-primary-grad-end: #1e1d8e;    /* Lighter indigo stop  */
  --color-primary-glow:     rgba(99,102,241,0.25); /* Purple glow highlight */

  /* ── Neutrals ─────────────────────────────────────────────── */
  --color-white:            #ffffff;
  --color-black:            #000000;
  --color-gray-50:          #fafafa;
  --color-gray-100:         #f4f4f5;
  --color-gray-200:         #e8e8e8;
  --color-gray-300:         #e0e0e0;
  --color-gray-400:         #989791;
  --color-gray-500:         #6b7280;
  --color-gray-600:         #4f5151;
  --color-gray-700:         #374151;
  --color-gray-800:         #1f2937;

  /* ── Semantic / Feedback ─────────────────────────────────────
     Each state has: bg / border (100 darker) / text             */
  --color-success:          #dcfce7;
  --color-success-border:   #bbf7d0;
  --color-success-text:     #166534;

  --color-error:            #fee2e2;
  --color-error-border:     #fecaca;
  --color-error-text:       #991b1b;

  --color-warning:          #fef9c3;
  --color-warning-border:   #fef08a;
  --color-warning-text:     #854d0e;

  --color-info:             #dbeafe;
  --color-info-border:      #bfdbfe;
  --color-info-text:        #1e40af;

  /* ── Surfaces ────────────────────────────────────────────────
     Change these to adjust the app's background feel.          */
  --color-bg-app:           #fafafa;   /* Page background       */
  --color-bg-card:          #ffffff;   /* Card / panel bg       */
  --color-bg-header:        rgba(249, 250, 251, 0.7);
  --color-bg-footer:        rgba(249, 250, 251, 0.9);
  --color-bg-overlay:       rgba(0, 0, 0, 0.6);
  --color-bg-input:         #ffffff;

  /* ── Borders ─────────────────────────────────────────────────*/
  --color-border:           #e0e0e0;
  --color-border-input:     #989791;
  --color-border-focus:     #1B4FD8;

  /* ── Typography ──────────────────────────────────────────────
     Change --font-family + the Google Fonts link in layout.rs  */
  --font-family:            'Lato', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-weight-light:      300;
  --font-weight-normal:     400;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;

  --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 */

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

  /* ── 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 */

  /* ── Radii ────────────────────────────────────────────────────
     All UI elements use rounded-md. Never use rounded-lg or    
     rounded-xl. Circles (avatars) use rounded-full.            */
  --radius-sm:              0.25rem;    /*  4px */
  --radius-md:              0.375rem;   /*  6px ← use this everywhere */
  --radius-lg:              0.5rem;     /*  8px */
  --radius-xl:              0.75rem;    /* 12px */
  --radius-full:            9999px;

  /* ── Shadows ──────────────────────────────────────────────────
     Buttons: shadow-md  |  Cards: shadow-sm  |  Never shadow-lg on cards */
  --shadow-sm:              0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:              0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg:              0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl:              0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* ── Transitions ──────────────────────────────────────────────*/
  --transition-fast:        150ms ease;   /* Buttons, interactions */
  --transition-base:        300ms ease;   /* Page transitions      */
  --transition-slow:        500ms ease;   /* Loading, animations   */

  /* ── Z-Index Scale ────────────────────────────────────────────
     Use these token classes — never z-50, z-[70], z-[80].      */
  --z-base:                 0;
  --z-dropdown:             10;
  --z-sticky:               20;
  --z-header:               50;
  --z-overlay:              60;
  --z-modal:                70;
  --z-toast:                80;

  /* ── Layout ───────────────────────────────────────────────────*/
  --max-width-app:          56rem;      /* 896px — max page width  */
  --header-height:          3.5rem;     /*  56px                   */
  --footer-height:          3.5rem;     /*  56px                   */
  --safe-area-top:          env(safe-area-inset-top, 0px);
  --safe-area-bottom:       env(safe-area-inset-bottom, 0px);

  /* ── Component Dimensions ────────────────────────────────────*/
  --btn-height:             2.5rem;     /* 40px — default button   */
  --btn-height-lg:          3rem;       /* 48px — large button     */
  --btn-height-sm:          2rem;       /* 32px — small button     */
  --input-height:           2.5rem;     /* 40px — all input types  */

  /* ── Visual Effects ───────────────────────────────────────────*/
  --backdrop-blur:          8px;        /* .glass class            */
  --spinner-size:           1rem;       /* 16px                    */
  --spinner-border:         2px;
}