/* ============================================================
   U Platform — Design Tokens
   colors_and_type.css
   ============================================================ */

/* Font loading is handled via <link rel="preconnect"> + <link rel="stylesheet">
   in index.html to avoid render-blocking @import. */

/* ============================================================
   COLOR TOKENS
   ============================================================ */

:root {

  /* --- Brand / Primary (Indigo) --- */
  --color-primary-50:  #EEF2FF;
  --color-primary-100: #E0E7FF;
  --color-primary-200: #C7D2FE;
  --color-primary-300: #A5B4FC;
  --color-primary-400: #818CF8;
  --color-primary-500: #6366F1;
  --color-primary-600: #4F46E5;
  --color-primary-700: #4338CA;  /* Brand anchor */
  --color-primary-800: #3730A3;
  --color-primary-900: #312E81;
  --color-primary-950: #1E1B4B;

  /* --- Neutral --- */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #FAFAFA;
  --color-neutral-100: #F4F4F5;
  --color-neutral-200: #E4E4E7;
  --color-neutral-300: #D1D1D6;
  --color-neutral-400: #A1A1AA;
  --color-neutral-500: #71717A;
  --color-neutral-600: #52525B;
  --color-neutral-700: #3F3F46;
  --color-neutral-800: #27272A;
  --color-neutral-900: #18181B;
  --color-neutral-950: #0F0F11;

  /* --- Semantic --- */
  --color-success-light: #DCFCE7;
  --color-success:       #16A34A;
  --color-success-dark:  #15803D;

  --color-warning-light: #FEF3C7;
  --color-warning:       #D97706;
  --color-warning-dark:  #B45309;

  --color-danger-light:  #FEE2E2;
  --color-danger:        #DC2626;
  --color-danger-dark:   #B91C1C;

  --color-info-light:    #E0F2FE;
  --color-info:          #0EA5E9;
  --color-info-dark:     #0284C7;

  /* --- Product accent colors --- */
  --color-studio:  #7C3AED;  /* Violet — U-STUDIO */
  --color-ai:      #4338CA;  /* Indigo — U-AI (brand primary) */
  --color-api:     #0EA5E9;  /* Sky — U-API */
  --color-store:   #16A34A;  /* Green — U-Store */

  /* --- Semantic surface tokens (light mode default) --- */
  --bg-page:         var(--color-neutral-50);
  --bg-surface:      var(--color-neutral-0);
  --bg-subtle:       var(--color-neutral-100);
  --bg-elevated:     var(--color-neutral-0);

  --border-default:  rgba(0, 0, 0, 0.08);
  --border-strong:   rgba(0, 0, 0, 0.16);
  --border-focus:    var(--color-primary-700);

  --fg-default:      var(--color-neutral-950);
  --fg-muted:        var(--color-neutral-500);
  --fg-subtle:       var(--color-neutral-400);
  --fg-inverse:      var(--color-neutral-0);
  --fg-brand:        var(--color-primary-700);
  --fg-link:         var(--color-primary-600);

  /* --- Interactive --- */
  --interactive-primary:       var(--color-primary-700);
  --interactive-primary-hover: var(--color-primary-500);
  --interactive-primary-press: var(--color-primary-900);

  /* ============================================================
     TYPOGRAPHY TOKENS
     ============================================================ */

  /* --- Font families --- */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* --- Font sizes --- */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.5rem;    /* 24px */
  --text-2xl:  1.875rem;  /* 30px */
  --text-3xl:  2.25rem;   /* 36px */
  --text-4xl:  3rem;      /* 48px */
  --text-5xl:  3.75rem;   /* 60px */

  /* --- Font weights --- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-extrabold:800;

  /* --- Line heights --- */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* --- Letter spacing --- */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.1em;

  /* ============================================================
     SPACING TOKENS
     ============================================================ */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* ============================================================
     RADIUS TOKENS
     ============================================================ */

  --radius-none: 0px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full:9999px;

  /* ============================================================
     SHADOW TOKENS
     ============================================================ */

  --shadow-0: none;
  --shadow-1: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-3: 0 16px 40px rgba(0,0,0,0.16), 0 4px 8px rgba(0,0,0,0.06);

  /* ============================================================
     ANIMATION TOKENS
     ============================================================ */

  --ease-default: cubic-bezier(0.25, 0, 0, 1);
  --duration-micro: 100ms;
  --duration-ui:    200ms;
  --duration-page:  350ms;
}

/* ============================================================
   DARK MODE OVERRIDES
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root {
    --bg-page:         var(--color-neutral-950);
    --bg-surface:      var(--color-neutral-900);
    --bg-subtle:       var(--color-neutral-800);
    --bg-elevated:     var(--color-neutral-800);

    --border-default:  rgba(255, 255, 255, 0.08);
    --border-strong:   rgba(255, 255, 255, 0.16);

    --fg-default:      var(--color-neutral-50);
    --fg-muted:        var(--color-neutral-400);
    --fg-subtle:       var(--color-neutral-600);
    --fg-inverse:      var(--color-neutral-950);
    --fg-brand:        var(--color-primary-400);
    --fg-link:         var(--color-primary-300);
  }
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

.t-display-xl {
  font-family: var(--font-sans);
  font-size: var(--text-5xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.t-display-lg {
  font-family: var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.t-display {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
.t-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}
.t-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
.t-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}
.t-body-lg {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
}
.t-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}
.t-body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}
.t-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.t-code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
}