/*
  Arij design tokens. The layout, density, type and component shapes follow Jira Cloud (system font stack at 14px,
  48px-ish rows, 3px corners, uppercase lozenges); the colours are Arij's own: an indigo primary on slate neutrals.
  Every colour lives here, so the palette can be changed in one place. Light only for now.
*/
:root {
    /* ---- Palette (change these to re-theme) ---- */
    --indigo-50: #eef2ff;
    --indigo-100: #e0e7ff;
    --indigo-200: #c7d2fe;
    --indigo-400: #818cf8;
    --indigo-500: #6366f1;
    --indigo-600: #4f46e5;
    --indigo-700: #4338ca;
    --indigo-800: #3730a3;
    --indigo-900: #312e81;
    --slate-0: #ffffff;
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    /* ---- Surfaces and text ---- */
    --bg: var(--slate-50);                 /* sunken: sidebar, board columns, page wells */
    --surface: var(--slate-0);
    --surface-warm: var(--surface);
    --surface-sunken: var(--slate-50);
    --topbar-bg: var(--slate-0);
    --sidebar-bg: var(--slate-50);
    --fg: var(--slate-800);                /* text */
    --fg-2: var(--slate-600);              /* text subtle */
    --muted: var(--slate-500);             /* text subtlest */
    --meta: var(--muted);
    --border: var(--slate-200);
    --border-soft: var(--slate-100);
    --border-input: var(--slate-300);
    --border-strong: var(--slate-300);

    /* ---- Primary and status colours ---- */
    --accent: var(--indigo-600);
    --accent-on: #ffffff;
    --accent-hover: var(--indigo-700);
    --accent-active: var(--indigo-800);
    --accent-tint: var(--indigo-50);       /* selected background */
    --accent-tint-2: var(--indigo-100);
    --accent-ink: var(--indigo-700);       /* selected text */
    --focus: var(--indigo-500);
    --selection: var(--indigo-100);
    --success: #16a34a;
    --success-tint: #dcfce7;
    --success-ink: #166534;
    --warn: #eab308;
    --warn-tint: #fef9c3;
    --warn-ink: #854d0e;
    --orange: #ea580c;
    --danger: #dc2626;
    --danger-hover: #b91c1c;
    --danger-tint: #fee2e2;
    --danger-ink: #b91c1c;
    --purple: #7c3aed;
    --purple-tint: #f3e8ff;
    --purple-ink: #6b21a8;
    --sky: #0ea5e9;

    /* ---- Neutral fills (default buttons, hovers, pressed) ---- */
    --tint: var(--slate-100);
    --tint-2: var(--slate-200);
    --tint-3: var(--slate-300);
    --overlay: rgb(15 23 42 / 0.45);

    /* ---- Lozenges (status): grey to do, primary in progress, green done ---- */
    --lz-todo-bg: var(--slate-200);
    --lz-todo-fg: var(--slate-700);
    --lz-progress-bg: var(--indigo-100);
    --lz-progress-fg: var(--indigo-800);
    --lz-done-bg: #d1fae5;
    --lz-done-fg: #065f46;

    /* ---- Issue types (Jira's familiar colour coding) ---- */
    --type-story: #65ba43;
    --type-bug: #e5493a;
    --type-task: #4bade8;
    --type-epic: #904ee2;
    --type-subtask: #7dc9ef;

    /* ---- Priorities ---- */
    --priority-high: #e5493a;
    --priority-medium: #f79232;
    --priority-low: #2a7fe0;

    /* ---- Click feedback (js/ripple.js) ---- */
    --ripple-ink: var(--indigo-600);       /* on light surfaces */
    --ripple-ink-on-fill: #ffffff;         /* on primary / danger buttons */
    --ripple-opacity: 0.18;

    /* ---- Typography ---- */
    --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, "Droid Sans", "Helvetica Neue", sans-serif;
    --font-body: var(--font-display);
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 20px;
    --text-xl: 24px;
    --text-2xl: 29px;
    --text-3xl: 35px;
    --text-4xl: 48px;
    --leading-body: 1.42857;
    --leading-tight: 1.2;
    --tracking-display: -0.008em;

    /* ---- Spacing ---- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-20: 80px;
    --section-y-desktop: 80px;
    --section-y-tablet: 48px;
    --section-y-phone: 32px;

    /* ---- Shape ---- */
    --radius-sm: 3px;
    --radius-md: 3px;
    --radius-lg: 8px;
    --radius-pill: 9999px;

    /* ---- Elevation ---- */
    --elev-flat: none;
    --elev-ring: 0 0 0 1px var(--border);
    --elev-card: 0 1px 1px rgb(15 23 42 / 0.12), 0 0 1px rgb(15 23 42 / 0.20);
    --elev-raised: 0 8px 12px rgb(15 23 42 / 0.12), 0 0 1px rgb(15 23 42 / 0.25);
    --elev-overlay: 0 8px 12px rgb(15 23 42 / 0.12), 0 0 1px rgb(15 23 42 / 0.25);
    --focus-ring: 0 0 0 2px var(--focus);

    /* ---- Motion ---- */
    --motion-fast: 100ms;
    --motion-base: 200ms;
    --ease-standard: cubic-bezier(0.15, 1, 0.3, 1);

    /* ---- Layout ---- */
    --topbar-h: 56px;
    --sidebar-w: 240px;
    --container-max: 1200px;
    --container-gutter-desktop: 24px;
    --container-gutter-tablet: 16px;
    --container-gutter-phone: 12px;

    /* Aliases kept for older component styles */
    --fg-tint: var(--tint-2);
    --fg-ink: var(--fg);
    --muted-tint: var(--tint);
    --muted-ink: var(--fg-2);
    color-scheme: light;
}