/* ============================================================
   Pastel Sky Design System — colors_and_type.css
   Single CSS source of truth. Compiled from the DTCG token files:
     primitive.tokens.json → semantic.tokens.json → themes/{light,dark}
   ------------------------------------------------------------
   RULE OF USE (from AGENTS.md / DESIGN-SYSTEM.md):
   • Components reference ONLY semantic vars (--color-*, --space-*,
     --radius-*, --typography-*, --motion-*).
   • Never reference a primitive ramp var (--sage-500) inside a
     component. Primitives exist so themes can remap semantics.
   • Never hardcode a hex / px / font-size. If a token is missing,
     flag it — don't invent one.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ------------------------------------------------------------
   1. PRIMITIVES — raw values. Do not use directly in components.
   ------------------------------------------------------------ */
:root {
  /* Sage — primary action. Muted, trustworthy green. */
  --sage-100: #E8F0EC;  --sage-200: #C2D9CC;  --sage-300: #8CB8A0;
  --sage-400: #5A9478;  --sage-500: #3A7058;  --sage-600: #2D5240;  --sage-700: #1C3429;

  /* Slate — structure, surfaces, dark base, info. */
  --slate-100: #EEF0F5; --slate-200: #CDD1E0; --slate-300: #9BA4C0;
  --slate-400: #6470A0; --slate-500: #3D4D80; --slate-600: #2B3660; --slate-700: #1A2040;

  /* Mauve — accent, AI moments. Reserved, not for primary CTAs. */
  --mauve-100: #F0EDF5; --mauve-200: #D8CEED; --mauve-300: #B8A8DC;
  --mauve-400: #8C74C4; --mauve-500: #6048A8; --mauve-600: #3E2C78; --mauve-700: #261848;

  /* Blush — danger. Muted rose, serious not alarming. */
  --blush-100: #F5EEED; --blush-200: #E8CACA; --blush-300: #D4A0A0;
  --blush-400: #B87070; --blush-500: #924848; --blush-600: #5C2E2E; --blush-700: #3A1C1C;

  /* Sand — warning + warm light base. */
  --sand-100: #F5F2EB;  --sand-200: #E8DFC8;  --sand-300: #D4C4A0;
  --sand-400: #B8A070;  --sand-500: #8C7040;  --sand-600: #4A3F28;  --sand-700: #2E2618;

  /* Sun — proposed new ramp: brighter, saturated yellow for accents / data / highlights.
     Kept separate from Sand so warnings + the warm base stay calm. (Local addition — port to
     Pastel Sky source to make official.) */
  --sun-100: #FCF1C9;   --sun-200: #F6DE7E;   --sun-300: #EEC53A;
  --sun-400: #D9A81E;   --sun-500: #A37A12;   --sun-600: #6B500F;   --sun-700: #43330D;

  /* Ink — neutral text, borders, subtle surfaces. */
  --ink-100: #F0EFEE;   --ink-200: #D4D2CE;   --ink-300: #A8A5A0;
  --ink-400: #706E68;   --ink-500: #484640;   --ink-600: #2C2B27;   --ink-700: #1A1916;

  /* Spacing scale — 4px base. */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;  --space-5: 20px;
  --space-6: 24px;  --space-8: 32px;  --space-10: 40px; --space-12: 48px; --space-16: 64px;

  /* Radius scale. */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;

  /* Type primitives. */
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --fs-xs: 11px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 17px;
  --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --fs-4xl: 36px;
  --fw-regular: 400; --fw-medium: 500; --fw-bold: 600;
  --lh-tight: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.7;

  /* Motion primitives. */
  --duration-fast: 100ms; --duration-normal: 200ms; --duration-slow: 350ms;
  --easing-default: cubic-bezier(0.2, 0, 0, 1);
  --easing-enter: cubic-bezier(0, 0, 0.2, 1);
  --easing-exit: cubic-bezier(0.4, 0, 1, 1);
}

/* ------------------------------------------------------------
   2. SEMANTIC — non-color tokens (theme-independent).
   These are the public API for spacing, radius, type, motion.
   ------------------------------------------------------------ */
:root {
  /* Spacing roles */
  --space-inset-sm: var(--space-3);   /* chips, badges */
  --space-inset-md: var(--space-4);   /* buttons, inputs, cards */
  --space-inset-lg: var(--space-6);   /* panels, modals */
  --space-stack-sm: var(--space-2);   /* tight vertical gap */
  --space-stack-md: var(--space-4);   /* form fields, list items */
  --space-stack-lg: var(--space-8);   /* section gaps */
  --space-inline-sm: var(--space-2);  /* icon+label */
  --space-inline-md: var(--space-4);  /* button groups */
  --space-inline-lg: var(--space-6);  /* sidebar columns */

  /* Radius roles */
  --radius-component: var(--radius-md);  /* buttons, inputs, chips */
  --radius-card: var(--radius-lg);       /* cards, panels, modals */
  --radius-pill: var(--radius-full);     /* tags, toggles */

  /* Layout roles */
  --layout-page-max: 840px;   /* canonical content measure — every full page centers at this width */

  /* Typography roles */
  --typography-display-size: var(--fs-4xl);
  --typography-display-weight: var(--fw-bold);
  --typography-display-line-height: var(--lh-tight);

  --typography-heading-lg-size: var(--fs-3xl);
  --typography-heading-lg-weight: var(--fw-bold);
  --typography-heading-lg-line-height: var(--lh-tight);

  --typography-heading-md-size: var(--fs-2xl);
  --typography-heading-md-weight: var(--fw-medium);
  --typography-heading-md-line-height: var(--lh-tight);

  --typography-heading-sm-size: var(--fs-xl);
  --typography-heading-sm-weight: var(--fw-medium);
  --typography-heading-sm-line-height: var(--lh-normal);

  --typography-body-lg-size: var(--fs-md);
  --typography-body-lg-weight: var(--fw-regular);
  --typography-body-lg-line-height: var(--lh-relaxed);

  --typography-body-md-size: var(--fs-sm);
  --typography-body-md-weight: var(--fw-regular);
  --typography-body-md-line-height: var(--lh-normal);

  --typography-label-size: var(--fs-sm);
  --typography-label-weight: var(--fw-medium);
  --typography-label-line-height: var(--lh-normal);

  --typography-caption-size: var(--fs-xs);
  --typography-caption-weight: var(--fw-regular);
  --typography-caption-line-height: var(--lh-normal);

  --typography-code-family: var(--font-mono);
  --typography-code-size: var(--fs-sm);

  /* Motion roles */
  --motion-enter-duration: var(--duration-normal);
  --motion-enter-easing: var(--easing-enter);
  --motion-exit-duration: var(--duration-fast);
  --motion-exit-easing: var(--easing-exit);
  --motion-emphasis-duration: var(--duration-slow);
  --motion-emphasis-easing: var(--easing-default);
}

/* ------------------------------------------------------------
   3. THEME: LIGHT (default). Maps semantic color → primitive.
   Warm sand base, not pure white (see DESIGN-SYSTEM.md decision).
   ------------------------------------------------------------ */
:root,
[data-theme="light"] {
  color-scheme: light;

  --color-surface-base:    #FFFFFF;
  --color-surface-raised:  #FAFAFA;
  --color-surface-overlay: #FFFFFF;
  --color-surface-sunken:  var(--sand-100);

  --color-text-primary:    var(--ink-700);
  --color-text-secondary:  var(--ink-500);
  --color-text-tertiary:   var(--ink-400);
  --color-text-on-action:  var(--sage-100);
  --color-text-on-accent:  var(--mauve-100);
  --color-text-link:       var(--sage-500);

  --color-action-primary:          var(--sage-500);
  --color-action-primary-hover:    var(--sage-600);
  --color-action-primary-active:   var(--sage-700);
  --color-action-primary-disabled: var(--sage-200);
  --color-action-secondary:        var(--sage-500);

  --color-accent-default:   var(--mauve-500);
  --color-accent-subtle:    var(--mauve-100);
  --color-accent-on-accent: var(--mauve-100);

  --color-border-default: var(--sand-300);
  --color-border-subtle:  var(--sand-200);
  --color-border-strong:  var(--ink-500);
  --color-border-action:  var(--sage-500);

  --color-feedback-success:        var(--sage-500);
  --color-feedback-success-subtle: var(--sage-100);
  --color-feedback-on-success:     var(--sage-100);
  --color-feedback-warning:        var(--sand-500);
  --color-feedback-warning-subtle: var(--sand-200);
  --color-feedback-on-warning:     var(--sand-700);
  --color-feedback-danger:         var(--blush-500);
  --color-feedback-danger-subtle:  var(--blush-100);
  --color-feedback-on-danger:      var(--blush-100);
  --color-feedback-info:           var(--slate-500);
  --color-feedback-info-subtle:    var(--slate-100);
  --color-feedback-on-info:        var(--slate-100);
}

/* ------------------------------------------------------------
   4. THEME: DARK. Deep slate-blue base (#1C2030), not black —
   black kills the pastel palette (see DESIGN-SYSTEM.md decision).
   ------------------------------------------------------------ */
[data-theme="dark"] {
  color-scheme: dark;

  --color-surface-base:    #1C2030;
  --color-surface-raised:  var(--slate-600);
  --color-surface-overlay: var(--slate-700);
  --color-surface-sunken:  var(--slate-700);

  --color-text-primary:    var(--slate-100);
  --color-text-secondary:  var(--slate-300);
  --color-text-tertiary:   var(--slate-400);
  --color-text-on-action:  var(--sage-100);
  --color-text-on-accent:  var(--mauve-200);
  --color-text-link:       var(--sage-300);

  --color-action-primary:          var(--sage-400);
  --color-action-primary-hover:    var(--sage-300);
  --color-action-primary-active:   var(--sage-200);
  --color-action-primary-disabled: var(--sage-700);
  --color-action-secondary:        var(--sage-300);

  --color-accent-default:   var(--mauve-400);
  --color-accent-subtle:    var(--mauve-700);
  --color-accent-on-accent: var(--mauve-200);

  --color-border-default: var(--slate-500);
  --color-border-subtle:  var(--slate-600);
  --color-border-strong:  var(--slate-300);
  --color-border-action:  var(--sage-400);

  --color-feedback-success:        var(--sage-400);
  --color-feedback-success-subtle: var(--sage-700);
  --color-feedback-on-success:     var(--sage-100);
  --color-feedback-warning:        var(--sand-400);
  --color-feedback-warning-subtle: var(--sand-600);
  --color-feedback-on-warning:     var(--sand-100);
  --color-feedback-danger:         var(--blush-400);
  --color-feedback-danger-subtle:  var(--blush-700);
  --color-feedback-on-danger:      var(--blush-100);
  --color-feedback-info:           var(--slate-300);
  --color-feedback-info-subtle:    var(--slate-600);
  --color-feedback-on-info:        var(--slate-100);
}

/* ------------------------------------------------------------
   5. TYPE ROLE HELPERS — apply a semantic type role in one class.
   Optional convenience; you may also use the vars directly.
   ------------------------------------------------------------ */
body { font-family: var(--font-sans); }

.t-display   { font-size: var(--typography-display-size);    font-weight: var(--typography-display-weight);    line-height: var(--typography-display-line-height); }
.t-heading-lg{ font-size: var(--typography-heading-lg-size); font-weight: var(--typography-heading-lg-weight); line-height: var(--typography-heading-lg-line-height); }
.t-heading-md{ font-size: var(--typography-heading-md-size); font-weight: var(--typography-heading-md-weight); line-height: var(--typography-heading-md-line-height); }
.t-heading-sm{ font-size: var(--typography-heading-sm-size); font-weight: var(--typography-heading-sm-weight); line-height: var(--typography-heading-sm-line-height); }
.t-body-lg   { font-size: var(--typography-body-lg-size);    font-weight: var(--typography-body-lg-weight);    line-height: var(--typography-body-lg-line-height); }
.t-body-md   { font-size: var(--typography-body-md-size);    font-weight: var(--typography-body-md-weight);    line-height: var(--typography-body-md-line-height); }
.t-label     { font-size: var(--typography-label-size);      font-weight: var(--typography-label-weight);      line-height: var(--typography-label-line-height); }
.t-caption   { font-size: var(--typography-caption-size);    font-weight: var(--typography-caption-weight);    line-height: var(--typography-caption-line-height); }
.t-code      { font-family: var(--typography-code-family);   font-size: var(--typography-code-size); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}