/* =============================================================
   Nawi — "Onyx & Ultraviolet" Design Tokens
   -------------------------------------------------------------
   Mirrors theme/nawi_colors.dart + theme/nawi_tokens.dart +
   theme/nawi_typography.dart. Do not invent new tokens here —
   if a spec hex isn't in this file, flag it.
   ============================================================= */

/* Fonts — Cairo (UI / Arabic body) + Readex Pro (Arabic display).
   Loaded from Google Fonts CDN. Replace with local @font-face if
   building offline-only artifacts. */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&family=Almarai:wght@300;400;700;800&display=swap');

:root {
  /* ── Primary Accent — Ultraviolet (exclusive, commanding) ───── */
  --nawi-primary:         #4D21FC;  /* light-mode primary */
  --nawi-primary-dark:    #6A42FF;  /* dark-mode primary */
  --nawi-primary-light:   #8B6FFF;  /* hover tint */
  --nawi-primary-surface: #F0ECFF;  /* violet wash */
  --nawi-lavender-grid:   #E9E4FF;  /* logo grid color */

  /* ── Semantic ─────────────────────────────────────────────── */
  --nawi-success:               #00D084;
  --nawi-success-light:         #00E676;  /* dark-mode success */
  --nawi-success-surface:       #E6FFF5;
  --nawi-semantic-success:      #0FA968;  /* "in sync" pill text */
  --nawi-semantic-success-surface: #E6F8EE;

  --nawi-warning:         #F59E0B;
  --nawi-warning-light:   #FBBF24;
  --nawi-warning-surface: #FFFBEB;

  --nawi-error:           #EF4444;
  --nawi-error-light:     #F87171;
  --nawi-error-surface:   #FEF2F2;

  --nawi-info:            #0EA5E9;
  --nawi-info-light:      #38BDF8;
  --nawi-info-surface:    #F0F9FF;

  /* ── Priority (P1 → P4) ───────────────────────────────────── */
  --nawi-p1: #EF4444;
  --nawi-p2: #F59E0B;
  --nawi-p3: #4D21FC;
  --nawi-p4: #8A8D93;

  /* ── Eisenhower quadrants ─────────────────────────────────── */
  --nawi-quadrant-do:        #EF4444;
  --nawi-quadrant-schedule:  #4D21FC;
  --nawi-quadrant-delegate:  #F59E0B;
  --nawi-quadrant-eliminate: #8A8D93;
  --nawi-semantic-schedule:         #2563EB;
  --nawi-semantic-schedule-surface: #E8F2FF;
  --nawi-semantic-delegate:         #C2410C;
  --nawi-semantic-delegate-surface: #FFF5E5;

  /* ── Calendar event identity carve-outs ───────────────────── */
  --nawi-event-saudi-national:         #006C35;
  --nawi-event-saudi-national-surface: #E6F4EC;
  --nawi-event-islamic:                #2B9720;
  --nawi-event-islamic-surface:        #E6F5E4;
  --nawi-event-international:          #AEA4BF;
  --nawi-event-international-surface:  #F1EFF5;
  --nawi-event-other:                  #AEF6C7;
  --nawi-event-other-surface:          #EFFCF3;

  /* ── Light Mode — "Frosted Glass" ─────────────────────────── */
  --nawi-bg-light:           #FAFAFA;  /* Alabaster */
  --nawi-surface-light:      #FFFFFF;  /* card */
  --nawi-surface-alt-light:  #F5F5F5;
  --nawi-divider-light:      #EBEBEB;
  --nawi-border-light:       #DDDDDD;
  --nawi-hover-light:        #F5F5F5;

  --nawi-text-primary-light:    #121316;  /* Carbon */
  --nawi-text-secondary-light:  #8A8D93;  /* Silver */
  --nawi-text-tertiary-light:   #B0B3B8;
  --nawi-text-disabled-light:   #D0D0D0;

  /* ── Dark Mode — "OLED" ───────────────────────────────────── */
  --nawi-bg-dark:           #050505;  /* OLED Black */
  --nawi-surface-dark:      #111112;  /* Onyx */
  --nawi-surface-alt-dark:  #1A1A1C;  /* Elevated onyx */
  --nawi-divider-dark:      #1F1F22;  /* Graphite */
  --nawi-border-dark:       #2A2A2E;
  --nawi-hover-dark:        #1A1A1C;

  --nawi-text-primary-dark:    #EDEDED;  /* Pearl */
  --nawi-text-secondary-dark:  #71747A;  /* Gunmetal */
  --nawi-text-tertiary-dark:   #4A4D52;
  --nawi-text-disabled-dark:   #333336;

  /* ── Semantic role tokens (default LIGHT) ─────────────────── */
  --bg:           var(--nawi-bg-light);
  --surface:      var(--nawi-surface-light);
  --surface-alt:  var(--nawi-surface-alt-light);
  --divider:      var(--nawi-divider-light);
  --border:       var(--nawi-border-light);
  --hover:        var(--nawi-hover-light);
  --fg1:          var(--nawi-text-primary-light);    /* pearl/carbon */
  --fg2:          var(--nawi-text-secondary-light);  /* gunmetal/silver */
  --fg3:          var(--nawi-text-tertiary-light);
  --fg-disabled:  var(--nawi-text-disabled-light);
  --accent:       var(--nawi-primary);
  --accent-soft:  var(--nawi-primary-surface);

  /* ── Spacing (8-pt grid) ──────────────────────────────────── */
  --space-2:  2px;
  --space-4:  4px;
  --space-6:  6px;
  --space-8:  8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  /* ── Radii ────────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* ── Borders ──────────────────────────────────────────────── */
  --border-thin:   1px;
  --border-medium: 1.5px;

  /* ── Light-mode shadows (subtle, single direction) ──────── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.10), 0 4px 6px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.15), 0 8px 10px rgba(0,0,0,0.05);
  --shadow-accent: 0 8px 24px rgba(77, 33, 252, 0.18);

  /* ── Dark-mode rule: BORDERS, NOT SHADOWS ───────────────── */
  --shadow-sm-dark: none;
  --shadow-md-dark: none;
  --shadow-lg-dark: none;

  /* ── Animation ────────────────────────────────────────────── */
  --duration-fast:   150ms;
  --duration-medium: 250ms;
  --duration-slow:   350ms;
  --ease-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
  --ease-snappy: cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */

  /* ── Iconography ─────────────────────────────────────────── */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;

  /* ── Touch ────────────────────────────────────────────────── */
  --touch-min: 44px;

  /* ── Type families ───────────────────────────────────────── */
  --font-ui:   "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ar:   "Almarai", "Cairo", system-ui, sans-serif;   /* Arabic display */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ── Dark theme override ───────────────────────────────────── */
:root[data-theme="dark"],
.theme-dark {
  --bg:          var(--nawi-bg-dark);
  --surface:     var(--nawi-surface-dark);
  --surface-alt: var(--nawi-surface-alt-dark);
  --divider:     var(--nawi-divider-dark);
  --border:      var(--nawi-border-dark);
  --hover:       var(--nawi-hover-dark);
  --fg1:         var(--nawi-text-primary-dark);
  --fg2:         var(--nawi-text-secondary-dark);
  --fg3:         var(--nawi-text-tertiary-dark);
  --fg-disabled: var(--nawi-text-disabled-dark);
  --accent:      var(--nawi-primary-dark);
  --accent-soft: rgba(106, 66, 255, 0.18);

  --shadow-sm: var(--shadow-sm-dark);
  --shadow-md: var(--shadow-md-dark);
  --shadow-lg: var(--shadow-lg-dark);
  --shadow-xl: none;
}

/* ============================================================
   Base type scale (mirrors lightTextTheme / darkTextTheme)
   ============================================================ */
html { font-family: var(--font-ui); color: var(--fg1); }
body { font-family: var(--font-ui); }

.nawi-display-lg { font-size: 36px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.2; }
.nawi-display-md { font-size: 30px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.2; }
.nawi-display-sm { font-size: 26px; font-weight: 600; letter-spacing: -0.25px; line-height: 1.3; }

.nawi-headline-lg { font-size: 32px; font-weight: 700; line-height: 1.25; }
.nawi-headline-md { font-size: 24px; font-weight: 700; line-height: 1.3;  }
.nawi-headline-sm { font-size: 20px; font-weight: 600; line-height: 1.3;  }

.nawi-title-lg { font-size: 20px; font-weight: 600; line-height: 1.4; }
.nawi-title-md { font-size: 16px; font-weight: 500; line-height: 1.4; }
.nawi-title-sm { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--fg2); }

.nawi-body-lg { font-size: 16px; font-weight: 400; line-height: 1.5; }
.nawi-body-md { font-size: 14px; font-weight: 400; line-height: 1.5; }
.nawi-body-sm { font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--fg2); }

.nawi-label-lg { font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0.1px; }
.nawi-label-md { font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.5px; color: var(--fg2); }
.nawi-label-sm { font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.5px; color: var(--fg3); }

/* Section header — large title used on Today / Inbox screens */
.nawi-section-header {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.15;
  color: var(--fg1);
}

/* Brand eyebrow — uppercase, wide-tracked violet label
   (used above paywall / premium headings) */
.nawi-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
}

/* Arabic-display companion (Almarai). Apply explicitly. */
.nawi-arabic-display {
  font-family: var(--font-ar);
  font-weight: 700;
  letter-spacing: 0;
}