/* ==========================================================================
   OkulSeti - Design Tokens
   Reference: DESIGN.md (section 13)
   Pure CSS variables — no preprocessor, no build step.
   Load order: tokens.css → base.css → components.css → utilities.css
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     Brand
     ---------------------------------------------------------------------- */
  --color-brand-blue:       #1E40AF;   /* Primary CTA, heading accent */
  --color-brand-blue-link:  #1E73BE;   /* Link primary */
  --color-brand-orange:     #F97316;   /* Accent / badge / WhatsApp */
  --color-brand-ink:        #1E293B;   /* Main heading text (slate-800) */

  /* ----------------------------------------------------------------------
     Neutrals
     ---------------------------------------------------------------------- */
  --color-text:             #222222;   /* Body text */
  --color-bg-app:           #F7F8F9;   /* Page background */
  --color-bg-soft:          #F8FAFC;   /* Soft card / input fill */
  --color-border:           #E2E8F0;   /* Button/card border */
  --color-border-input:     #CBD5E1;   /* Form input border */
  --color-divider:          #F1F5F9;   /* Header bottom rule */
  --color-footer-bg:        #2D3748;   /* Footer background */

  /* ----------------------------------------------------------------------
     Sections
     ---------------------------------------------------------------------- */
  --color-section-alt:      #F0F9FF;   /* Alternative section background */
  --gradient-hero:          linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);

  /* ----------------------------------------------------------------------
     Step / accent surfaces (pastels for step circles)
     ---------------------------------------------------------------------- */
  --color-sky-100:          #E0F2FE;
  --color-orange-100:       #FFEDD5;
  --color-orange-500:       #F97316;
  --color-green-100:        #DCFCE7;
  --color-green-600:        #16A34A;

  /* ----------------------------------------------------------------------
     Semantic (alerts / status)
     ---------------------------------------------------------------------- */
  --color-success-bg:       #DCFCE7;
  --color-success-text:     #166534;
  --color-error-bg:         #FEE2E2;
  --color-error-text:       #991B1B;
  --color-info-bg:          #DBEAFE;
  --color-info-text:        #1E40AF;
  --color-warning-bg:       #FFEDD5;
  --color-warning-text:     #9A3412;
  --color-muted-text:       #475569;   /* slate-600, secondary copy */

  /* Order status badges (admin) */
  --status-pending-bg:      #E2E8F0;
  --status-pending-text:    #475569;
  --status-paid-bg:         #DBEAFE;
  --status-paid-text:       #1E40AF;
  --status-preparing-bg:    #FFEDD5;
  --status-preparing-text:  #9A3412;
  --status-shipped-bg:      #EDE9FE;
  --status-shipped-text:    #6D28D9;
  --status-delivered-bg:    #DCFCE7;
  --status-delivered-text:  #166534;
  --status-cancelled-bg:    #FEE2E2;
  --status-cancelled-text:  #991B1B;

  /* ----------------------------------------------------------------------
     Radius
     ---------------------------------------------------------------------- */
  --radius-pill:            50px;      /* Nav pill, badge */
  --radius-lg:              18px;      /* Submit button, input */
  --radius-md:              12px;      /* Hero CTA, cards */

  /* ----------------------------------------------------------------------
     Shadow
     ---------------------------------------------------------------------- */
  --shadow-soft:            0 4px 10px rgba(0, 0, 0, 0.05);
  --shadow-cta:             0 10px 20px rgba(30, 64, 175, 0.2);

  /* ----------------------------------------------------------------------
     Spacing
     ---------------------------------------------------------------------- */
  --section-py-lg:          100px;     /* Large sections */
  --section-py-md:          60px;      /* Logo strip / footer */
  --header-py:              15px;

  /* ----------------------------------------------------------------------
     Typography
     ---------------------------------------------------------------------- */
  --font-system: -apple-system, system-ui, "Segoe UI", Helvetica, Arial,
                 sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
                 "Segoe UI Symbol";
  --fs-body:                17px;
  --fs-h1:                  52px;
  --fs-h2:                  46px;
  --fs-h3:                  32px;
  --fs-h4:                  19px;
  --fs-badge:               12px;
  --fw-heavy:               900;
  --fw-bold:                800;
  --fw-semibold:            700;

  /* ----------------------------------------------------------------------
     Motion
     ---------------------------------------------------------------------- */
  --transition-fast:        color 0.1s ease-in-out, background-color 0.1s ease-in-out;
  --transition-base:        0.3s;
  --transition-material:    0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ----------------------------------------------------------------------
     Breakpoints (sass-style reference only — use media queries directly)
     ---------------------------------------------------------------------- */
  --bp-sm:                  600px;
  --bp-md:                  768px;
  --bp-lg:                  1025px;
  --bp-xl:                  1218px;
}