/*
 * Collavre Design Tokens
 *
 * Based on Open Props (https://open-props.style) scale system.
 * This file defines all design tokens used across Collavre.
 * DO NOT hardcode raw values in component CSS — use these tokens instead.
 *
 * Enforced by Stylelint (stylelint.config.mjs)
 */

/* ============================================================================
 * SPACING (from Open Props --size-*)
 * Usage: padding, margin, gap
 * ============================================================================ */
:root {
  --space-000: -0.5rem;   /* -8px */
  --space-00: -0.25rem;   /* -4px */
  --space-1: 0.25rem;     /* 4px */
  --space-2: 0.5rem;      /* 8px */
  --space-3: 1rem;        /* 16px */
  --space-4: 1.25rem;     /* 20px */
  --space-5: 1.5rem;      /* 24px */
  --space-6: 1.75rem;     /* 28px */
  --space-7: 2rem;        /* 32px */
  --space-8: 3rem;        /* 48px */
  --space-9: 4rem;        /* 64px */
  --space-10: 5rem;       /* 80px */
  --space-11: 7.5rem;     /* 120px */
  --space-12: 10rem;      /* 160px */

  /* Pixel variants (for when rem isn't appropriate) */
  --space-px-1: 4px;
  --space-px-2: 8px;
  --space-px-3: 16px;
  --space-px-4: 20px;
  --space-px-5: 24px;
  --space-px-6: 28px;
  --space-px-7: 32px;
  --space-px-8: 48px;

  /* ============================================================================
   * TYPOGRAPHY (from Open Props --font-size-*, --font-weight-*, --font-lineheight-*)
   * ============================================================================ */

  /* Font families */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Dank Mono", "Operator Mono", "Inconsolata", "Fira Mono",
    ui-monospace, "SF Mono", Monaco, "Droid Sans Mono", "Source Code Pro",
    "Cascadia Code", Menlo, Consolas, "DejaVu Sans Mono", monospace;

  /* Font sizes */
  --text-00: 0.5rem;      /* 8px — tiny labels */
  --text-0: 0.75rem;      /* 12px — small/caption */
  --text-1: 1rem;         /* 16px — body (base) */
  --text-2: 1.1rem;       /* 17.6px — slightly larger body */
  --text-3: 1.25rem;      /* 20px — subheading */
  --text-4: 1.5rem;       /* 24px — heading */
  --text-5: 2rem;         /* 32px — large heading */
  --text-6: 2.5rem;       /* 40px — display */
  --text-7: 3rem;         /* 48px — hero */
  --text-8: 3.5rem;       /* 56px — jumbo */

  /* Font weights */
  --weight-1: 100;        /* thin */
  --weight-2: 200;        /* extra-light */
  --weight-3: 300;        /* light */
  --weight-4: 400;        /* regular */
  --weight-5: 500;        /* medium */
  --weight-6: 600;        /* semi-bold */
  --weight-7: 700;        /* bold */
  --weight-8: 800;        /* extra-bold */
  --weight-9: 900;        /* black */

  /* Line heights */
  --leading-00: 0.95;     /* tight — headings */
  --leading-0: 1.1;       /* compact */
  --leading-1: 1.25;      /* snug */
  --leading-2: 1.375;     /* normal */
  --leading-3: 1.5;       /* relaxed (default body) */
  --leading-4: 1.75;      /* loose */
  --leading-5: 2;         /* extra loose */

  /* ============================================================================
   * BORDERS & RADIUS (from Open Props)
   * ============================================================================ */
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 5px;
  --border-4: 10px;

  --radius-1: 2px;        /* subtle */
  --radius-2: 5px;        /* default */
  --radius-3: 1rem;       /* medium */
  --radius-4: 2rem;       /* large */
  --radius-5: 4rem;       /* pill-like */
  --radius-round: 1e5px;  /* circle */

  /* ============================================================================
   * SHADOWS (from Open Props)
   * ============================================================================ */
  --shadow-color: 220 3% 15%;
  --shadow-strength: 1%;

  --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
  --shadow-2:
    0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
  --shadow-3:
    0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
  --shadow-4:
    0 -2px 5px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%));

  /* ============================================================================
   * EASING & ANIMATION (from Open Props)
   * ============================================================================ */
  --ease-1: cubic-bezier(0.25, 0, 0.5, 1);
  --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
  --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
  --ease-in-1: cubic-bezier(0.25, 0, 1, 1);
  --ease-in-2: cubic-bezier(0.50, 0, 1, 1);
  --ease-out-1: cubic-bezier(0, 0, 0.75, 1);
  --ease-out-2: cubic-bezier(0, 0, 0.50, 1);
  --ease-out-3: cubic-bezier(0, 0, 0.3, 1);

  /* ============================================================================
   * Z-INDEX LAYERS
   * ============================================================================ */
  --layer-1: 1;
  --layer-2: 2;
  --layer-3: 3;
  --layer-4: 4;
  --layer-5: 5;
  --layer-popup: 100;
  --layer-modal: 1000;
  --layer-toast: 2000;
  --layer-important: 2147483647;

  /* ============================================================================
   * BREAKPOINTS (reference only — use in @media queries)
   * ============================================================================ */
  /* --bp-xs: 360px;  */
  /* --bp-sm: 480px;  */
  /* --bp-md: 768px;  */
  /* --bp-lg: 1024px; */
  /* --bp-xl: 1440px; */

  /* ============================================================================
   * SEMANTIC COLOR TOKENS
   * These map Open Props primitives → meaningful roles.
   * Every token here MUST also be defined in body.dark-mode below.
   * ============================================================================ */

  /* -- Surfaces (backgrounds) -- */
  --surface-bg: #f7f7f8;              /* page background */
  --surface-nav: #ffffff;             /* navigation bar */
  --surface-section: #ffffff;         /* cards, panels */
  --surface-input: #f7f7f8;          /* form inputs */
  --surface-btn: #f1f2f4;            /* default button */
  --surface-secondary: #ffffff;       /* secondary panels */

  /* -- Text -- */
  --text-primary: #202123;           /* main body text */
  --text-muted: #666666;             /* secondary / helper text */
  --text-on-btn: #202123;            /* text on default buttons */
  --text-nav: #202123;               /* navigation text */
  --text-nav-btn: #202123;           /* navigation button text */
  --text-chat-btn: #666666;          /* chat action buttons */
  --text-on-badge: white;            /* text on badges */
  --text-input: #202123;             /* input field text */

  /* -- Interactive -- */
  --color-link: #185ABC;             /* hyperlinks */
  --color-brand: oklch(60% 0.4 145); /* brand / accent / complete */
  --color-active: #007bff;           /* active / selected state */
  --color-danger: #dc3545;           /* errors, destructive */
  --color-success: oklch(60% 0.4 145); /* success (= brand for now) */
  --color-warning: #f59e0b;          /* warnings */
  --color-highlight: #ffff99;         /* highlight flash */
  --color-badge-bg: red;             /* notification badge */
  --color-accent-border: #7bc4e4;    /* active element border */
  --color-accent-text: #03425f;      /* active element text */
  --color-code-bg: #f6f8fa;          /* code block background */
  --color-code-text: #1f2328;        /* code block text */

  /* -- Borders & Dividers -- */
  --border-color: #e0e0e0;           /* default borders */
  --border-drag-over: #e0e0e0;       /* drag target highlight */
  --border-drag-edge: #bbbbbb;       /* drag edge indicator */

  /* -- Effects -- */
  --hover-brightness: 90%;           /* filter: brightness() on hover */

  /* -- Layout -- */
  --max-width: 960px;                /* content max width */
  --paragraph-space: 0.75rem;        /* gap between paragraphs */
}

/* ============================================================================
 * DARK MODE OVERRIDES
 * Every semantic token that changes in dark mode MUST be listed here.
 * ============================================================================ */
body.dark-mode {
  --shadow-color: 220 40% 2%;
  --shadow-strength: 25%;

  /* -- Surfaces -- */
  --surface-bg: #212121;
  --surface-nav: #181818;
  --surface-section: #181818;
  --surface-input: #212121;
  --surface-btn: #333543;
  --surface-secondary: #181818;

  /* -- Text -- */
  --text-primary: #eaeaea;
  --text-muted: #aaaaaa;
  --text-on-btn: #eaeaea;
  --text-nav: #eaeaea;
  --text-nav-btn: #eaeaea;
  --text-chat-btn: #aaaaaa;
  --text-on-badge: white;
  --text-input: #eaeaea;

  /* -- Interactive -- */
  --color-link: #185ABC;
  --color-brand: oklch(50% 0.4 145);
  --color-active: #6a9eff;
  --color-badge-bg: red;
  --color-highlight: #665500;
  --color-accent-border: #4a8aaa;
  --color-accent-text: #8ecfef;
  --color-code-bg: #2d2d2d;
  --color-code-text: #e0e0e0;

  /* -- Borders & Dividers -- */
  --border-color: #333333;
  --border-drag-over: #383a40;
  --border-drag-edge: #777777;

  /* -- Effects -- */
  --hover-brightness: 110%;

  /* -- Date input -- */
  --date-icon-filter: invert(0.8);
}

/* ============================================================================
 * SYSTEM DARK MODE (prefers-color-scheme)
 * Mirror of body.dark-mode for users without explicit toggle.
 * ============================================================================ */
@media (prefers-color-scheme: dark) {
  body:not(.light-mode):not(.dark-mode) {
    color-scheme: dark;
    --shadow-color: 220 40% 2%;
    --shadow-strength: 25%;

    --surface-bg: #212121;
    --surface-nav: #181818;
    --surface-section: #181818;
    --surface-input: #212121;
    --surface-btn: #333543;
    --surface-secondary: #181818;

    --text-primary: #eaeaea;
    --text-muted: #aaaaaa;
    --text-on-btn: #eaeaea;
    --text-nav: #eaeaea;
    --text-nav-btn: #eaeaea;
    --text-chat-btn: #aaaaaa;
    --text-on-badge: white;
    --text-input: #eaeaea;

    --color-link: #185ABC;
    --color-brand: oklch(50% 0.4 145);
    --color-active: #6a9eff;
    --color-badge-bg: red;
    --color-highlight: #665500;
    --color-accent-border: #4a8aaa;
    --color-accent-text: #8ecfef;
    --color-code-bg: #2d2d2d;
    --color-code-text: #e0e0e0;

    --border-color: #333333;
    --border-drag-over: #383a40;
    --border-drag-edge: #777777;

    --hover-brightness: 110%;

    --date-icon-filter: invert(0.8);

    /* Legacy aliases — must be redefined here so var() resolves against
       the dark semantic tokens above, not :root's light values. */
    --color-bg: var(--surface-bg);
    --color-nav-bg: var(--surface-nav);
    --color-section-bg: var(--surface-section);
    --color-input-bg: var(--surface-input);
    --color-btn-bg: var(--surface-btn);
    --color-secondary-background: var(--surface-secondary);
    --color-text: var(--text-primary);
    --color-muted: var(--text-muted);
    --color-btn-text: var(--text-on-btn);
    --color-nav-text: var(--text-nav);
    --color-nav-btn-text: var(--text-nav-btn);
    --color-chat-btn-text: var(--text-chat-btn);
    --color-badge-text: var(--text-on-badge);
    --color-input-text: var(--text-input);
    --color-complete: var(--color-brand);
    --color-chip-bg: var(--color-brand);
    --color-secondary-active: var(--color-active);
    --color-border: var(--border-color);
    --color-drag-over: var(--border-drag-over);
    --color-drag-over-edge: var(--border-drag-edge);
  }
}