@layer tokens, base, components, utilities;

/* --------------------------------------
   TOKENS (fixed sizes – no fluid scale)
-------------------------------------- */
@layer tokens {
  :root {
    /* Brand stacks */
    --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    --font-display: "Plus Jakarta Sans", var(--font-body);
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono";

    /* Type sizes (px) */
    --fs-body: 16px;
    --fs-sm:   14px;
    --fs-xs:   12px;

    --fs-h1:   26px;
    --fs-h2:   22px;
    --fs-h3:   19px;
    --fs-h4:   16px;
    --fs-h5:   14px;
    --fs-h6:   12px;

    /* Line-heights */
    --lh-tight: 1.15;
    --lh-snug:  1.2;
    --lh-head:  1.25;
    --lh-body:  1.6;

    /* Weights */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Colors */
    --color-heading: #111827;
    --color-body: #222222;
    --color-muted: #6b7280;

    /* Semantic colors */
    --color-success: #10b981;     /* Green icons, success states */
    --color-error: #ef4444;       /* Red icons, error states */
    --color-warning: #f59e0b;     /* Yellow/orange warnings */
    --color-info: #3b82f6;        /* Blue info, timeline dots */
    --color-border: #e5e7eb;      /* Borders, dividers */
    --color-background: #ffffff;   /* Card backgrounds */

    /* Primary brand colors */
    --color-primary: #324fbe;     /* Primary brand blue */
    --color-primary-hover: #2a42a1; /* Primary brand blue hover */

    /* Extended semantic colors */
    --color-success-dark: #059669;  /* Dark green for gradients */
    --color-background-light: #f8f9fa; /* Light background */
    --color-background-muted: #f3f4f6; /* Muted background */
    --color-border-muted: #d1d5db;     /* Muted borders */
    --color-border-strong: #d1d5db;

    /* Border radius system */
    --radius-xs: 2px;    /* Tiny elements */
    --radius-sm: 4px;    /* Small elements, form inputs */
    --radius-md: 6px;    /* Standard elements */
    --radius-lg: 8px;    /* Cards, buttons */
    --radius-xl: 12px;   /* Large containers */
    --radius-round: 50%; /* Circular elements */

    /* Shadow system */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Container sizes */
    --container-sm: 440px;  /* Widget max-width */
    --container-md: 768px;  /* Tablet breakpoint */
    --container-lg: 1024px; /* Desktop breakpoint */

    /* Spacing System */
    --space-xs: 0.5rem;   /* 8px - Tight internal spacing */
    --space-sm: 0.75rem;  /* 12px - List item gaps */
    --space-md: 1rem;     /* 16px - Standard spacing */
    --space-lg: 1.5rem;   /* 24px - Section internal */
    --space-xl: 2rem;     /* 32px - Section separation */
    --space-2xl: 3rem;    /* 48px - Major sections */

    /* Component spacing tokens */
    --component-margin: var(--space-xl) 0;  /* Standard component margins */
    --section-gap: var(--space-xl);         /* Between major sections */
    --content-gap: var(--space-lg);         /* Between content blocks */

    /* --- Compatibility aliases (keep old code working) --- */
    --step-4:  var(--fs-h1); /* ~26px */
    --step-3:  var(--fs-h2); /* ~22px */
    --step-2:  var(--fs-h3); /* ~19px */
    --step-1:  var(--fs-h4); /* ~16px */
    --step-0:  var(--fs-body); /* 16px */
    --step--1: var(--fs-h5); /* 14px */
    --step--2: var(--fs-h6); /* 12px */

    /* Bootstrap bridge */
    --bs-font-sans-serif: var(--font-body);
    --bs-body-font-family: var(--font-body);
    --bs-body-font-size: var(--fs-body);
    --bs-body-line-height: var(--lh-body);
  }
}