/* ==========================================================================
   Synchronize Admin — Colors & Type
   Pulled 1:1 from src/app/globals.css + tailwind.config.ts.
   Values kept as HSL channels (the way shadcn expects them) AND as
   resolved hex/oklch so designers can paste them anywhere.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Brand primitives (from logo.svg) ---------- */
  --brand-indigo: #4242F0;     /* logo "S" mark */
  --brand-navy:   #222240;     /* logo wordmark */

  /* ---------- shadcn HSL channels (raw) ---------- */
  --background: 0 0% 100%;
  --foreground: 222.2 47.4% 11.2%;

  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;

  --popover: 0 0% 100%;
  --popover-foreground: 222.2 47.4% 11.2%;

  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;

  --card: 0 0% 100%;
  --card-foreground: 222.2 47.4% 11.2%;

  /* Indigo-600 */
  --primary: 243 75% 59%;
  --primary-foreground: 243 75% 98%;

  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;

  --accent: 243 75% 95%;
  --accent-foreground: 243 75% 10%;

  --destructive: 0 72% 51%;
  --destructive-foreground: 210 40% 98%;

  --ring: 243 75% 59%;
  --radius: 0.5rem;

  /* Chart palette */
  --chart-1: 141.9 69.2% 58%;  /* green  */
  --chart-2: 198.4 93.2% 59.6%;/* sky    */
  --chart-3: 240 5% 64.9%;     /* slate  */
  --chart-4: 43 74% 66%;       /* amber  */
  --chart-5: 27 87% 67%;       /* orange */

  /* ---------- Resolved hex aliases (convenience) ---------- */
  --bg:        #ffffff;
  --fg1:       #0f172a;   /* foreground        */
  --fg2:       #475569;   /* muted-foreground  */
  --fg3:       #94a3b8;   /* gray-400 - icon default */
  --surface:   #ffffff;   /* card              */
  --canvas:    #f3f4f6;   /* gray-100 - main bg */
  --hover-bg:  #f9fafb;   /* gray-50           */
  --border-1:  #e2e8f0;   /* default border    */
  --border-2:  #e5e7eb;   /* gray-200          */

  --primary-600: #4F46E5; /* indigo-600 (primary) */
  --primary-700: #4338CA; /* indigo-700 gradient end */
  --primary-100: #E0E7FF; /* indigo-100 chip bg */
  --accent-bg:   #EEF2FF; /* accent = indigo-50 */

  --danger:      #DC2626;
  --danger-bg:   #FEF2F2;
  --warning:     #CA8A04;
  --warning-bg:  #FEFCE8;
  --success:     #16A34A;
  --success-bg:  #F0FDF4;
  --info:        #2563EB;
  --info-bg:     #EFF6FF;

  /* Tailwind gray scale used in this app */
  --gray-50:  #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* Type stack */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Type scale (page-level) — matches Tailwind text-sm/base defaults the app uses */
  --t-display:   30px / 36px var(--font-sans); /* H1 page title */
  --t-h2:        20px / 28px var(--font-sans);
  --t-h3:        16px / 24px var(--font-sans); /* CardTitle     */
  --t-body:      14px / 20px var(--font-sans); /* shadcn default */
  --t-body-lg:   16px / 24px var(--font-sans);
  --t-small:     12px / 16px var(--font-sans); /* labels, badges */
  --t-xs:        11px / 14px var(--font-sans);

  /* Spacing tokens (matches Tailwind used density) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Radius tokens (derived from --radius) */
  --radius-sm: 4px;   /* calc(var(--radius) - 4px) */
  --radius-md: 6px;   /* calc(var(--radius) - 2px) */
  --radius-lg: 8px;   /* var(--radius)             */
  --radius-full: 9999px;

  /* Elevation — shadcn defaults, used lightly */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow:    0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* ==========================================================================
   Semantic element styles — safe to use as a baseline in any HTML artifact.
   ========================================================================== */

html, body {
  font: var(--t-body);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font: 700 var(--t-display); letter-spacing: -0.01em; color: var(--fg1); margin: 0; }
h2 { font: 600 var(--t-h2);      letter-spacing: -0.005em; color: var(--fg1); margin: 0; }
h3 { font: 600 var(--t-h3);      color: var(--fg1); margin: 0; }
p  { font: var(--t-body); color: var(--fg1); margin: 0; }

small, .t-small { font: var(--t-small); color: var(--fg2); }
.t-xs           { font: var(--t-xs);    color: var(--fg2); }
.t-muted        { color: var(--fg2); }

code, kbd, pre {
  font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Fira Code', Menlo, monospace;
  font-size: 13px;
}

a { color: var(--primary-600); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }

::selection { background: var(--accent-bg); color: var(--primary-700); }