/* ===================================================================
   CashierThru Design Tokens — ct-tokens.css
   Single source of truth for colour, type, spacing, radius, shadow
   and motion across the marketing site, tenant dashboard and super
   admin. Tokens only: no element selectors live in this file, so it
   is safe to load before any other stylesheet.

   Docs: docs/design-system.md
=================================================================== */

:root {
    /* ---------------------------------------------------------------
       1. Palette (raw values — prefer the role tokens in section 2)
    --------------------------------------------------------------- */
    --ct-teal-50:   #E7F6F4;
    --ct-teal-100:  #C4EAE6;
    --ct-teal-300:  #5FC4BD;
    --ct-teal-500:  #16A39B;   /* logo teal */
    --ct-teal-600:  #11908A;
    --ct-teal-700:  #0E7C76;   /* AA on white (5.0:1) */
    --ct-teal-800:  #0B615C;

    --ct-orange-50:  #FFF3EA;
    --ct-orange-100: #FDE0C8;
    --ct-orange-300: #F9A866;
    --ct-orange-500: #F47C20;  /* "THRU" orange */
    --ct-orange-600: #E0631A;
    --ct-orange-700: #B85510;  /* AA on white (4.9:1) */

    --ct-ink-900: #0F1222;
    --ct-ink-800: #1A1A2E;
    --ct-ink-700: #2A2E3F;
    --ct-ink-600: #5C6070;
    --ct-ink-500: #6B7080;     /* lightest grey that passes AA on white */
    --ct-ink-300: #C9CCD6;
    --ct-ink-200: #E2E5EC;
    --ct-ink-100: #F0F1F5;
    --ct-ink-50:  #F6F7F9;
    --ct-white:   #FFFFFF;

    --ct-blue-500:  #2078A5;   /* app blue — info states */
    --ct-green-600: #16A34A;
    --ct-amber-600: #D97706;
    --ct-red-600:   #DC2626;

    /* ---------------------------------------------------------------
       2. Roles — what components should use
    --------------------------------------------------------------- */
    /* Brand identity: logo, active navigation, links, focus */
    --ct-brand:        var(--ct-teal-500);
    --ct-brand-hover:  var(--ct-teal-600);
    --ct-brand-strong: var(--ct-teal-700);  /* brand-coloured text */
    --ct-brand-soft:   var(--ct-teal-50);
    --ct-on-brand:     var(--ct-white);

    /* Primary action: main buttons and CTAs (one per view) */
    --ct-action:        var(--ct-orange-500);
    --ct-action-hover:  var(--ct-orange-600);
    --ct-action-strong: var(--ct-orange-700); /* orange text on light */
    --ct-action-soft:   var(--ct-orange-50);
    --ct-on-action:     var(--ct-white);

    --ct-gradient-brand: linear-gradient(135deg, var(--ct-teal-500) 0%, var(--ct-orange-500) 100%);

    /* Surfaces & text */
    --ct-bg:            var(--ct-white);
    --ct-bg-subtle:     var(--ct-ink-50);
    --ct-surface:       var(--ct-white);
    --ct-surface-2:     var(--ct-ink-100);
    --ct-surface-3:     var(--ct-ink-200);
    --ct-border:        rgba(15, 18, 34, 0.08);
    --ct-border-strong: var(--ct-ink-200);
    --ct-text:          var(--ct-ink-900);
    --ct-text-muted:    var(--ct-ink-600);
    --ct-text-subtle:   var(--ct-ink-500);
    --ct-text-inverse:  var(--ct-white);

    /* Feedback */
    --ct-success:      var(--ct-green-600);
    --ct-success-soft: #E8F7EE;
    --ct-warning:      var(--ct-amber-600);
    --ct-warning-soft: #FEF3E2;
    --ct-danger:       var(--ct-red-600);
    --ct-danger-soft:  #FDECEC;
    --ct-info:         var(--ct-blue-500);
    --ct-info-soft:    #E6F1F7;

    --ct-focus-ring: 0 0 0 3px rgba(22, 163, 155, 0.35);

    /* ---------------------------------------------------------------
       3. Typography — Cairo covers Arabic and Latin, so one family
          serves both languages
    --------------------------------------------------------------- */
    --ct-font-sans: 'Cairo', 'Segoe UI', Tahoma, system-ui, sans-serif;
    --ct-font-mono: ui-monospace, 'Cascadia Code', Consolas, monospace;

    --ct-text-xs:   12px;
    --ct-text-sm:   14px;
    --ct-text-base: 16px;
    --ct-text-lg:   18px;
    --ct-text-xl:   20px;
    --ct-text-2xl:  24px;
    --ct-text-3xl:  30px;
    --ct-text-4xl:  36px;
    --ct-text-5xl:  48px;

    --ct-weight-regular:  400;
    --ct-weight-medium:   500;
    --ct-weight-semibold: 600;
    --ct-weight-bold:     700;
    --ct-weight-black:    800;

    --ct-leading-tight:  1.2;
    --ct-leading-normal: 1.6;

    /* ---------------------------------------------------------------
       4. Spacing — 4px grid
    --------------------------------------------------------------- */
    --ct-space-1:  4px;
    --ct-space-2:  8px;
    --ct-space-3:  12px;
    --ct-space-4:  16px;
    --ct-space-5:  20px;
    --ct-space-6:  24px;
    --ct-space-8:  32px;
    --ct-space-10: 40px;
    --ct-space-12: 48px;
    --ct-space-16: 64px;

    /* ---------------------------------------------------------------
       5. Shape & elevation
    --------------------------------------------------------------- */
    --ct-radius-sm:   8px;
    --ct-radius-md:   12px;
    --ct-radius-lg:   16px;
    --ct-radius-xl:   24px;
    --ct-radius-pill: 999px;

    --ct-shadow-sm:     0 2px 8px rgba(15, 18, 34, 0.06);
    --ct-shadow-md:     0 10px 30px rgba(15, 18, 34, 0.08);
    --ct-shadow-lg:     0 24px 60px rgba(15, 18, 34, 0.12);
    --ct-shadow-action: 0 8px 22px rgba(244, 124, 32, 0.28);
    --ct-shadow-brand:  0 8px 22px rgba(22, 163, 155, 0.28);

    /* ---------------------------------------------------------------
       6. Motion
    --------------------------------------------------------------- */
    --ct-duration-fast: 150ms;
    --ct-duration-base: 250ms;
    --ct-duration-slow: 400ms;
    --ct-ease:          cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Tap targets (WCAG 2.5.8) */
    --ct-target-min: 44px;
}

/* -------------------------------------------------------------------
   Dark theme — opt in with <html data-theme="dark"> (super admin)
------------------------------------------------------------------- */
[data-theme="dark"] {
    --ct-brand:        #2EC4B9;
    --ct-brand-hover:  #5FD3CA;
    --ct-brand-strong: #5FD3CA;
    --ct-brand-soft:   rgba(46, 196, 185, 0.16);
    --ct-on-brand:     var(--ct-ink-900);

    --ct-action:        #F7913F;
    --ct-action-hover:  #F9A866;
    --ct-action-strong: #F9A866;
    --ct-action-soft:   rgba(247, 145, 63, 0.16);
    --ct-on-action:     var(--ct-ink-900);

    --ct-bg:            #0F1222;
    --ct-bg-subtle:     #131729;
    --ct-surface:       #171B2E;
    --ct-surface-2:     #1F2438;
    --ct-surface-3:     #2A3048;
    --ct-border:        rgba(255, 255, 255, 0.08);
    --ct-border-strong: rgba(255, 255, 255, 0.16);
    --ct-text:          #F4F5F8;
    --ct-text-muted:    rgba(244, 245, 248, 0.72);
    --ct-text-subtle:   rgba(244, 245, 248, 0.6);
    --ct-text-inverse:  var(--ct-ink-900);

    --ct-success:      #4ADE80;
    --ct-success-soft: rgba(74, 222, 128, 0.16);
    --ct-warning:      #FBBF24;
    --ct-warning-soft: rgba(251, 191, 36, 0.16);
    --ct-danger:       #F87171;
    --ct-danger-soft:  rgba(248, 113, 113, 0.16);
    --ct-info:         #60A5FA;
    --ct-info-soft:    rgba(96, 165, 250, 0.16);

    --ct-focus-ring: 0 0 0 3px rgba(46, 196, 185, 0.45);

    --ct-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --ct-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);
    --ct-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --ct-duration-fast: 0ms;
        --ct-duration-base: 0ms;
        --ct-duration-slow: 0ms;
    }
}