/* =============================================================================
   GSMOne Design System — Official Design Tokens
   -----------------------------------------------------------------------------
   Single source of truth for the entire GSMOne UI (admin + client + public).
   Inspired by the rigor of Apple HIG, Stripe, Linear and Notion.

   USAGE
     Load this file ONCE, before any page CSS. Every component must consume
     these CSS variables — never hardcode a hex, radius, shadow or spacing again.

     Good:  background: var(--ds-color-brand); border-radius: var(--ds-radius-md);
     Bad:   background: #006994;               border-radius: 8px;

   The palette/scales below are DERIVED FROM the colors already dominant in the
   codebase (teal #006994 brand, Tailwind gray ramp, 8/6/10px radii) so adoption
   is incremental, not a rewrite.
   ============================================================================= */

:root {
  /* ===========================================================================
     1. COLOR — Brand
     Teal is GSMOne's brand color (most-used accent in the codebase).
     A full 50→900 ramp lets components pick the right weight by context.
     =========================================================================== */
  --ds-color-brand-50:  #e6f3f7;
  --ds-color-brand-100: #c0e0eb;
  --ds-color-brand-200: #8ac6d8;
  --ds-color-brand-300: #4ea7c0;
  --ds-color-brand-400: #1f8fad;
  --ds-color-brand-500: #0086aa;   /* hover / lighter brand (used 146× today) */
  --ds-color-brand-600: #006994;   /* PRIMARY brand (used 207× today)         */
  --ds-color-brand-700: #005678;
  --ds-color-brand-800: #00425c;
  --ds-color-brand-900: #002e40;
  --ds-color-brand:        var(--ds-color-brand-600);
  --ds-color-brand-hover:  var(--ds-color-brand-700);
  --ds-color-brand-subtle: var(--ds-color-brand-50);

  /* Accent — indigo/violet (secondary actions, highlights, "pro" surfaces) */
  --ds-color-accent-400: #818cf8;
  --ds-color-accent-500: #6366f1;  /* used 173× today */
  --ds-color-accent-600: #4f46e5;
  --ds-color-accent:       var(--ds-color-accent-500);
  --ds-color-accent-hover: var(--ds-color-accent-600);

  /* ===========================================================================
     2. COLOR — Neutrals (Tailwind "gray" ramp — already the codebase standard)
     Use these for text, borders, backgrounds. Never invent a new gray.
     =========================================================================== */
  --ds-color-gray-50:  #f9fafb;
  --ds-color-gray-100: #f3f4f6;
  --ds-color-gray-200: #e5e7eb;
  --ds-color-gray-300: #d1d5db;
  --ds-color-gray-400: #9ca3af;
  --ds-color-gray-500: #6b7280;   /* most-used gray (591×) — secondary text */
  --ds-color-gray-600: #4b5563;
  --ds-color-gray-700: #374151;
  --ds-color-gray-800: #1f2937;
  --ds-color-gray-900: #111827;   /* primary text (335×) */
  --ds-color-white:    #ffffff;
  --ds-color-black:    #000000;

  /* Semantic text / surface roles (consume these in components) */
  --ds-text-primary:    var(--ds-color-gray-900);
  --ds-text-secondary:  var(--ds-color-gray-500);
  --ds-text-tertiary:   var(--ds-color-gray-400);
  --ds-text-inverse:    var(--ds-color-white);
  --ds-text-link:       var(--ds-color-brand-600);

  --ds-surface-page:    var(--ds-color-gray-50);
  --ds-surface-card:    var(--ds-color-white);
  --ds-surface-sunken:  var(--ds-color-gray-100);
  --ds-surface-hover:   var(--ds-color-gray-50);

  --ds-border:          var(--ds-color-gray-200);
  --ds-border-strong:   var(--ds-color-gray-300);
  --ds-border-focus:    var(--ds-color-brand-500);

  /* ===========================================================================
     3. COLOR — Semantic states (success / warning / danger / info)
     Each role: base, hover, subtle bg, on-subtle text. From codebase colors.
     =========================================================================== */
  --ds-color-success:        #10b981;
  --ds-color-success-hover:  #059669;
  --ds-color-success-subtle: #ecfdf5;
  --ds-color-success-text:   #065f46;

  --ds-color-warning:        #f59e0b;
  --ds-color-warning-hover:  #d97706;
  --ds-color-warning-subtle: #fffbeb;
  --ds-color-warning-text:   #92400e;

  --ds-color-danger:         #ef4444;
  --ds-color-danger-hover:   #dc2626;
  --ds-color-danger-subtle:  #fee2e2;
  --ds-color-danger-text:    #b91c1c;

  --ds-color-info:           #3b82f6;
  --ds-color-info-hover:     #2563eb;
  --ds-color-info-subtle:    #eff6ff;
  --ds-color-info-text:      #1e40af;

  /* ===========================================================================
     4. TYPOGRAPHY
     System stack first (Apple-grade rendering, zero web-font CLS). Inter as the
     optional brand font when loaded. Mono for codes/IMEI/API keys.
     =========================================================================== */
  --ds-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --ds-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  /* Type scale — 1.250 (major third), rounded to whole px. */
  --ds-text-xs:   0.75rem;   /* 12px — captions, table meta            */
  --ds-text-sm:   0.875rem;  /* 14px — body small, inputs, buttons     */
  --ds-text-base: 1rem;      /* 16px — default body                    */
  --ds-text-lg:   1.125rem;  /* 18px — lead, card titles               */
  --ds-text-xl:   1.25rem;   /* 20px — section titles                  */
  --ds-text-2xl:  1.5rem;    /* 24px — page titles                     */
  --ds-text-3xl:  1.875rem;  /* 30px — hero subtitle                   */
  --ds-text-4xl:  2.25rem;   /* 36px — hero                            */
  --ds-text-5xl:  3rem;      /* 48px — marketing hero                  */

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

  --ds-leading-tight:   1.25;
  --ds-leading-snug:    1.375;
  --ds-leading-normal:  1.5;
  --ds-leading-relaxed: 1.625;

  --ds-tracking-tight:  -0.02em;   /* large headings */
  --ds-tracking-normal: 0;
  --ds-tracking-wide:   0.025em;   /* uppercase labels, badges */

  /* ===========================================================================
     5. SPACING — 4px base grid (every margin/padding is a multiple of 4)
     =========================================================================== */
  --ds-space-0:  0;
  --ds-space-1:  0.25rem;  /*  4px */
  --ds-space-2:  0.5rem;   /*  8px */
  --ds-space-3:  0.75rem;  /* 12px */
  --ds-space-4:  1rem;     /* 16px */
  --ds-space-5:  1.25rem;  /* 20px */
  --ds-space-6:  1.5rem;   /* 24px */
  --ds-space-8:  2rem;     /* 32px */
  --ds-space-10: 2.5rem;   /* 40px */
  --ds-space-12: 3rem;     /* 48px */
  --ds-space-16: 4rem;     /* 64px */
  --ds-space-20: 5rem;     /* 80px */

  /* ===========================================================================
     6. RADII (8/6/10px are already the codebase favorites)
     =========================================================================== */
  --ds-radius-xs:   4px;    /* badges, tags                 */
  --ds-radius-sm:   6px;    /* inputs, small buttons        */
  --ds-radius-md:   8px;    /* buttons, cards (default)     */
  --ds-radius-lg:   10px;   /* cards, panels                */
  --ds-radius-xl:   12px;   /* modals, large cards          */
  --ds-radius-2xl:  16px;   /* hero surfaces                */
  --ds-radius-full: 9999px; /* pills, avatars, switches     */

  /* ===========================================================================
     7. SHADOWS — soft, layered (Stripe/Linear feel). Tied to elevation.
     =========================================================================== */
  --ds-shadow-xs:  0 1px 2px rgba(17, 24, 39, 0.05);
  --ds-shadow-sm:  0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
  --ds-shadow-md:  0 4px 8px rgba(17, 24, 39, 0.08), 0 2px 4px rgba(17, 24, 39, 0.04);
  --ds-shadow-lg:  0 12px 24px rgba(17, 24, 39, 0.10), 0 4px 8px rgba(17, 24, 39, 0.05);
  --ds-shadow-xl:  0 24px 48px rgba(17, 24, 39, 0.14), 0 8px 16px rgba(17, 24, 39, 0.06);
  --ds-shadow-focus: 0 0 0 3px rgba(0, 105, 148, 0.25);   /* brand focus ring */
  --ds-shadow-focus-danger: 0 0 0 3px rgba(239, 68, 68, 0.25);

  /* ===========================================================================
     8. COMPONENT SIZING — fixed heights = visual rhythm everywhere
     =========================================================================== */
  /* Inputs */
  --ds-input-height-sm: 32px;
  --ds-input-height:    40px;   /* default */
  --ds-input-height-lg: 48px;
  --ds-input-padding-x: var(--ds-space-3);
  --ds-input-border:    1px solid var(--ds-border-strong);
  --ds-input-radius:    var(--ds-radius-sm);
  --ds-input-font:      var(--ds-text-sm);

  /* Buttons (heights match inputs so they align in a row) */
  --ds-btn-height-sm: 32px;
  --ds-btn-height:    40px;   /* default */
  --ds-btn-height-lg: 48px;
  --ds-btn-padding-x: var(--ds-space-4);
  --ds-btn-radius:    var(--ds-radius-md);
  --ds-btn-font:      var(--ds-text-sm);
  --ds-btn-weight:    var(--ds-font-weight-semibold);

  /* Cards */
  --ds-card-padding:   var(--ds-space-6);
  --ds-card-radius:    var(--ds-radius-lg);
  --ds-card-border:    1px solid var(--ds-border);
  --ds-card-shadow:    var(--ds-shadow-sm);
  --ds-card-bg:        var(--ds-surface-card);

  /* Modals */
  --ds-modal-width-sm:  420px;
  --ds-modal-width:     560px;
  --ds-modal-width-lg:  760px;
  --ds-modal-width-xl:  960px;
  --ds-modal-radius:    var(--ds-radius-xl);
  --ds-modal-padding:   var(--ds-space-6);
  --ds-modal-shadow:    var(--ds-shadow-xl);
  --ds-modal-backdrop:  rgba(17, 24, 39, 0.45);

  /* Tables */
  --ds-table-row-height:    48px;
  --ds-table-cell-padding:  var(--ds-space-3) var(--ds-space-4);
  --ds-table-header-bg:     var(--ds-surface-sunken);
  --ds-table-header-color:  var(--ds-text-secondary);
  --ds-table-border:        1px solid var(--ds-border);
  --ds-table-stripe:        var(--ds-color-gray-50);

  /* Badges */
  --ds-badge-height:    20px;
  --ds-badge-padding-x: var(--ds-space-2);
  --ds-badge-radius:    var(--ds-radius-xs);
  --ds-badge-font:      var(--ds-text-xs);
  --ds-badge-weight:    var(--ds-font-weight-semibold);

  /* Icons (match line-height of adjacent text) */
  --ds-icon-xs: 12px;
  --ds-icon-sm: 16px;
  --ds-icon-md: 20px;   /* default, aligns with --ds-text-base */
  --ds-icon-lg: 24px;
  --ds-icon-xl: 32px;

  /* ===========================================================================
     9. MOTION — calm, purposeful (Apple/Linear). Never gratuitous.
     =========================================================================== */
  --ds-duration-instant: 80ms;
  --ds-duration-fast:    150ms;
  --ds-duration-normal:  220ms;
  --ds-duration-slow:    320ms;
  --ds-ease-standard: cubic-bezier(0.2, 0, 0, 1);     /* enter/move */
  --ds-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);   /* attention  */
  --ds-ease-out:      cubic-bezier(0, 0, 0.2, 1);     /* exit       */
  --ds-transition-base: all var(--ds-duration-fast) var(--ds-ease-standard);

  /* ===========================================================================
     10. Z-INDEX scale — one ladder, no magic numbers
     =========================================================================== */
  --ds-z-base:     0;
  --ds-z-dropdown: 1000;
  --ds-z-sticky:   1100;
  --ds-z-overlay:  1200;
  --ds-z-modal:    1300;
  --ds-z-toast:    1400;
  --ds-z-tooltip:  1500;

  /* ===========================================================================
     11. LAYOUT / RESPONSIVE — container widths (breakpoints documented below)
     Breakpoints (min-width): mobile 0 · tablet 768px · desktop 1024px · wide 1280px
     =========================================================================== */
  --ds-container-sm:  640px;
  --ds-container-md:  768px;
  --ds-container-lg:  1024px;
  --ds-container-xl:  1280px;
  --ds-container-2xl: 1440px;
  --ds-container-pad: var(--ds-space-4);   /* gutters on mobile */
}

/* =============================================================================
   RESPONSIVE TOKEN OVERRIDES
   Tokens that should shift by viewport. Components inherit automatically.
   ============================================================================= */

/* Tablet & up (>=768px): slightly roomier gutters */
@media (min-width: 768px) {
  :root {
    --ds-container-pad: var(--ds-space-6);
    --ds-card-padding:  var(--ds-space-6);
  }
}

/* Desktop & up (>=1024px): full modal widths, generous card padding */
@media (min-width: 1024px) {
  :root {
    --ds-container-pad: var(--ds-space-8);
    --ds-card-padding:  var(--ds-space-8);
  }
}

/* Mobile (<768px): modals go (near) full-width, larger touch targets */
@media (max-width: 767px) {
  :root {
    --ds-modal-width-sm: calc(100vw - var(--ds-space-8));
    --ds-modal-width:    calc(100vw - var(--ds-space-6));
    --ds-modal-width-lg: calc(100vw - var(--ds-space-4));
    --ds-modal-width-xl: calc(100vw - var(--ds-space-4));
    /* Touch ergonomics: never below 44px interactive height on mobile */
    --ds-input-height:   44px;
    --ds-btn-height:     44px;
    --ds-table-row-height: 52px;
  }
}

/* Accessibility: respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-duration-instant: 0ms;
    --ds-duration-fast:    0ms;
    --ds-duration-normal:  0ms;
    --ds-duration-slow:    0ms;
  }
}