/**
 * Ethio Telecom — Unified Design Tokens
 *
 * Source of truth for all Ethio Telecom branding used across:
 *   - OBD Portal (obd-portal/packages/ui/src/styles/tokens.css)
 *   - AI Companion (Ai-companion/src/styles/tokens.css)
 *   - Merchant Super App (this project)
 *
 * Usage: @import this file in your globals.css before Tailwind
 */

:root {
  /* ─────────────────────────────────────────────
   * GREENS — Primary Ethio Telecom brand color
   * ───────────────────────────────────────────── */

  /* Canonical Tele green — use for buttons, active states, brand strip */
  --tele-green: #87c140;
  --tele-green-dark: #5a8f0f;

  /* Howlow / product green variants */
  --howlow-green: #7cb518;          /* Deeper, ring/hover */
  --howlow-green-light: #8bc34a;    /* Soft hover highlight */
  --howlow-green-dark: #5a8f0f;     /* Deep accent, dark surface hover */

  /* Gradient start point for brand strips */
  --al-green-strip-start: #6ba832;

  /* OBD portal aliases */
  --obd-green: var(--tele-green);

  /* Light green surfaces */
  --al-cream: #f5faf0;              /* Lightest green wash — page shell */
  --al-sand: #f4f8ef;               /* Card surface, secondary bg */
  --al-green-soft: #e8f5e9;         /* Chip / badge backgrounds */
  --shell-mint: #f5faf0;            /* Shell/layout background */
  --shell-start: #e8f4d8;           /* Login/hero gradient top-left */

  /* Sage UI sub-palette (green-tinted neutrals) */
  --sage-bg: #f3f7ec;
  --sage-bg-2: #f4f8ef;
  --sage-bg-3: #f7f9f4;
  --sage-border: #c5d9a8;
  --sage-border-2: #cfe3a8;
  --sage-text: #2f4a12;
  --al-nav-text: #2f5a0f;

  /* ─────────────────────────────────────────────
   * BLUES — Ethio Telecom sky blue
   * ───────────────────────────────────────────── */

  --tele-blue: #1781C5;             /* Official Tele sky blue */
  --howlow-blue: #1781C5;           /* Material-style blue — links, interactive */
  --howlow-blue-light: #42a5f5;     /* Blue hover / focus ring */
  --obd-blue: var(--tele-blue);
  --obd-primary: var(--howlow-blue);

  /* Nav active state */
  --nav-active: #e8f3fc;
  --nav-active-text: #1781C5;

  /* ─────────────────────────────────────────────
   * ACCENTS — Orange & Gold
   * ───────────────────────────────────────────── */

  --howlow-orange: #ff8a3d;         /* Warm accent — badges, highlights */
  --al-gold: #fed100;               /* Gold — premium / special */
  --al-gold-bright: #fed100;
  --al-amber: #f5a623;              /* Amber variant */
  --al-bronze: #5a8f0f;

  /* ─────────────────────────────────────────────
   * NEUTRAL / UI BASE
   * ───────────────────────────────────────────── */

  --background: #ffffff;
  --card: #ffffff;
  --howlow-surface: #f7f9fc;        /* Default body background */
  --foreground: #1a1a2e;            /* Primary text */
  --howlow-text: #1a1a2e;
  --al-ink: #1a1a2e;
  --howlow-muted: #6b7280;          /* Secondary / muted text */
  --al-muted: #6b7280;
  --muted-foreground: #6b7280;

  --border: #e8ecf1;                /* Default border */
  --al-border: #e5edd9;             /* Green-tinted border */
  --ring: #7cb518;                  /* Focus ring */

  /* Semantic aliases (Tailwind-compatible) */
  --primary: #1781C5;               /* UI primary = blue (links, buttons default) */
  --primary-foreground: #ffffff;
  --secondary: #f0f4f8;
  --muted: #f3f4f6;
  --accent: #e8f5e9;
  --accent-foreground: #2e7d32;
  --destructive: #ef4444;

  /* ─────────────────────────────────────────────
   * STATUS COLORS
   * ───────────────────────────────────────────── */

  --live-bg: #e8f5e9;
  --live-text: #2e7d32;
  --ending-soon-bg: #fde8e8;
  --ending-soon-text: #e53935;

  /* ─────────────────────────────────────────────
   * TYPOGRAPHY
   * ───────────────────────────────────────────── */

  /* Primary stacks */
  --font-sans: "Instrument Sans", "Noto Sans Ethiopic", Arial, sans-serif;
  --font-heading: "Fraunces", "Noto Serif Ethiopic", Georgia, serif;
  --font-display: "Fraunces", "Noto Serif Ethiopic", Georgia, serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;

  /* Ethiopic companions */
  --font-amharic-display: "Noto Serif Ethiopic", "Fraunces", Georgia, serif;
  --font-amharic-body: "Noto Sans Ethiopic", "Instrument Sans", Arial, sans-serif;

  /* OBD portal fallbacks */
  --font-inter: "Inter", system-ui, sans-serif;
  --font-jakarta: "Plus Jakarta Sans", system-ui, sans-serif;

  /* Type scale */
  --type-display: 300 clamp(3.5rem, 6vw, 6rem) / 0.95 var(--font-display);
  --type-h1: 350 2.5rem / 1.15 var(--font-heading);
  --type-h2: 350 1.75rem / 1.2 var(--font-heading);
  --type-h3: 600 1.1875rem / 1.35 var(--font-sans);
  --type-body: 400 1rem / 1.6 var(--font-sans);
  --type-label: 500 0.6875rem / 1.4 var(--font-mono);

  /* ─────────────────────────────────────────────
   * SPACING / SHAPE / SHADOW
   * ───────────────────────────────────────────── */

  --radius: 1.125rem;
  --sidebar-width: 280px;

  --soft-shadow: 0 8px 24px rgba(26, 46, 26, 0.05);
  --elevated-shadow:
    0 1px 2px rgba(26, 46, 26, 0.03),
    0 12px 32px rgba(26, 46, 26, 0.06);
}

/* ─────────────────────────────────────────────
 * Tailwind v4 @theme inline bridge
 * Maps CSS vars → Tailwind color utilities
 * ───────────────────────────────────────────── */
@theme inline {
  /* Semantic */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-ring: var(--ring);

  /* Greens */
  --color-tele-green: var(--tele-green);
  --color-tele-green-dark: var(--tele-green-dark);
  --color-howlow-green: var(--howlow-green);
  --color-howlow-green-light: var(--howlow-green-light);
  --color-howlow-green-dark: var(--howlow-green-dark);
  --color-obd-green: var(--obd-green);
  --color-al-cream: var(--al-cream);
  --color-al-sand: var(--al-sand);
  --color-al-green-soft: var(--al-green-soft);

  /* Blues */
  --color-tele-blue: var(--tele-blue);
  --color-howlow-blue: var(--howlow-blue);
  --color-howlow-blue-light: var(--howlow-blue-light);
  --color-obd-blue: var(--obd-blue);
  --color-nav-active: var(--nav-active);
  --color-nav-active-text: var(--nav-active-text);

  /* Accents */
  --color-howlow-orange: var(--howlow-orange);
  --color-al-gold: var(--al-gold);
  --color-al-amber: var(--al-amber);

  /* Neutrals */
  --color-howlow-surface: var(--howlow-surface);
  --color-howlow-text: var(--howlow-text);
  --color-howlow-muted: var(--howlow-muted);
  --color-al-ink: var(--al-ink);
  --color-al-border: var(--al-border);

  /* Status */
  --color-live-bg: var(--live-bg);
  --color-live-text: var(--live-text);
  --color-ending-soon-bg: var(--ending-soon-bg);
  --color-ending-soon-text: var(--ending-soon-text);

  /* Fonts */
  --font-sans: var(--font-sans);
  --font-heading: var(--font-heading);
  --font-display: var(--font-display);
  --font-mono: var(--font-mono);

  /* Radius */
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);

  /* Shadows */
  --shadow-soft: var(--soft-shadow);
  --shadow-elevated: var(--elevated-shadow);

  /* Type scale */
  --type-display: var(--type-display);
  --type-h1: var(--type-h1);
  --type-h2: var(--type-h2);
  --type-h3: var(--type-h3);
  --type-body: var(--type-body);
  --type-label: var(--type-label);
}

/* ─────────────────────────────────────────────
 * UTILITY CLASSES
 * ───────────────────────────────────────────── */

/* Main shell background — Ethio Telecom green wash */
.tele-shell-bg,
.admin-shell-bg,
.admin-login-bg {
  background:
    radial-gradient(ellipse 90% 70% at 0% 0%, rgba(135, 193, 64, 0.22), transparent 55%),
    radial-gradient(ellipse 55% 45% at 100% 0%, rgba(21, 128, 196, 0.1), transparent 50%),
    linear-gradient(165deg, #e8f4d8 0%, #eef7e4 24%, #f3f8ef 48%, #f7f9fc 72%, #fbfcfd 100%);
  min-height: 100vh;
}

/* Brand strip — nav header bar */
.tele-brand-strip,
.obd-brand-strip,
.assist-brand-strip {
  background: linear-gradient(120deg, #6ba832 0%, #87c140 42%, #7cb518 78%, #5a8f0f 100%);
  box-shadow: 0 10px 28px rgba(90, 143, 15, 0.18);
}

/* Green button */
.gradient-green-btn {
  background: linear-gradient(135deg, #87c140 0%, #7cb518 100%);
  color: #ffffff;
}

/* Blue button */
.gradient-blue-btn {
  background: linear-gradient(135deg, #1781C5 0%, #42a5f5 100%);
  color: #ffffff;
}

/* Tele-green scrollbars */
.tele-scroll,
.tele-scroll * {
  scrollbar-width: thin;
  scrollbar-color: #87c140 #eef2e8;
}
.tele-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.tele-scroll::-webkit-scrollbar-track { background: #eef2e8; border-radius: 9999px; }
.tele-scroll::-webkit-scrollbar-thumb { background: #87c140; border-radius: 9999px; border: 2px solid #eef2e8; }
.tele-scroll::-webkit-scrollbar-thumb:hover { background: #5a8f0f; }

/* Shadows */
.shadow-soft    { box-shadow: var(--soft-shadow); }
.shadow-elevated { box-shadow: var(--elevated-shadow); }

/* Glass card */
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.glass-card-elevated {
  background: linear-gradient(165deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.72) 100%);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(194, 201, 179, 0.35);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 10px 32px rgba(26,46,26,0.06),
    0 2px 8px rgba(135,193,64,0.05);
}