/* ─────────────────────────────────────────────────────────────
   Animagic Work OS — Design Tokens

   This file defines the design system. It loads AFTER style.css
   and overrides default values via CSS cascade.

   Grid: 8px
   All spacing is a multiple of 8px.
   ───────────────────────────────────────────────────────────── */

:root {
    /* ── Color Palette ── */
    --color-black: #000000;
    --color-dark: #0f0f0f;
    --color-card: #141414;
    --color-accent: #85a9fb;
    --color-accent-hover: #a0bfff;
    --color-text: #aaaaaa;
    --color-text-label: #414141;
    --color-text-muted: #666666;
    --color-success: #3cff4f;
    --color-danger: #fda4af;
    --color-warning: #fdba74;

    /* ── Brand Colors ── */
    --color-primary: #90a8f9;
    --color-secondary: #b9a9f4;
    --color-tertiary: #9be6f4;
    --color-base-white: #fafefe;
    --gradient-brand: linear-gradient(135deg, #b9a9f4, #90a8f9, #9be6f4);

    /* ── Semantic Color Mapping ── */
    --body-bg: #0c0c0c;
    --body-bg-a25: rgba(12, 12, 12, 0.25);
    --card-1: #141414;
    --card-2: #0f0f0f;
    --card-3: #1a1a1a;
    --card-4: #222222;
    --input-1: #000000;
    --input-2: #000000;
    --input-3: #141414;
    --input-4: #000000;
    --sidebar-bg: #000000;
    --sidebar-card-1: #141414;
    --border: transparent;
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-subtle-strong: rgba(255, 255, 255, 0.08);
    --border-dark: #1e1e24;
    --scrollbar-thumb: #333;
    --scrollbar-thumb-hover: #555;

    /* ── Neutral surface tints (hover / active / subtle) ──
       Translucent white layers for interactive surfaces. These are
       chromatically neutral (don't pick up an accent tint) and are
       overridden per theme in the light-mode block below. */
    --bg-subtle: rgba(255, 255, 255, 0.03);
    --bg-hover: rgba(255, 255, 255, 0.04);
    --bg-hover-strong: rgba(255, 255, 255, 0.05);
    --bg-active: rgba(255, 255, 255, 0.06);
    --bg-active-strong: rgba(255, 255, 255, 0.12);

    /* ── Overlay scrims for modal backdrops ── */
    --overlay-scrim: rgba(0, 0, 0, 0.6);
    --overlay-scrim-strong: rgba(0, 0, 0, 0.85);
    --text: #aaaaaa;
    --text-muted: #666666;
    --text-label: #414141;
    --accent: #85a9fb;
    --accent-hover: #a0bfff;
    --on-accent: #000000;

    /* ── Legacy Aliases (used throughout style.css) ── */
    --green: var(--color-success);
    --red: var(--color-danger);
    --orange: var(--color-warning);
    --danger: var(--color-danger);
    --pink: #5eead4;
    --cyan: #48e1d6;
    --border-light: var(--border-dark);

    /* ── Spacing (8px grid) ── */
    --space-0-5: 4px;
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;

    /* ── Border Radius ── */
    --radius-sm: 4px;     /* Inputs, buttons, pills, stepper */
    --radius-md: 8px;     /* Cards, sections, containers */
    --radius-lg: 12px;    /* Large containers if needed */
    --radius-full: 999px; /* Pill / circle shapes */
    --radius: var(--radius-md);  /* Override default --radius */

    /* ── Component Sizes ── */
    --input-height: var(--space-4);
    --button-height: var(--space-4);
    --button-width: 144px;
    --stepper-height: var(--space-4);

    /* ── Typography — Semantic Scale ── */
    --font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    /* H1 — Page titles */
    --h1-font: 'Archivo', system-ui, sans-serif;
    --h1-size: 20px;
    --h1-weight: 500;
    --h1-line-height: 1.2;
    --h1-style: normal;
    --h1-size-mobile: 17px;
    --h1-line-height-mobile: 1.2;

    /* H2 — Section titles */
    --h2-font: 'Archivo', system-ui, sans-serif;
    --h2-size: 16px;
    --h2-weight: 500;
    --h2-line-height: 1.3;
    --h2-style: normal;
    --h2-size-mobile: 14px;
    --h2-line-height-mobile: 1.3;

    /* H3 — Sub-labels */
    --h3-font: 'Archivo', system-ui, sans-serif;
    --h3-size: 13px;
    --h3-weight: 600;
    --h3-line-height: 1.4;
    --h3-style: normal;
    --h3-size-mobile: 12px;
    --h3-line-height-mobile: 1.4;

    /* Body — Descriptions, hints, toggles */
    --body-font: 'Archivo', system-ui, sans-serif;
    --body-size: 12px;
    --body-weight: 400;
    --body-line-height: 1.55;
    --body-style: normal;
    --body-size-mobile: 12px;
    --body-line-height-mobile: 1.55;

    /* Caption — Field labels, table headers */
    --caption-font: 'Archivo', system-ui, sans-serif;
    --caption-size: 10px;
    --caption-weight: 500;
    --caption-line-height: 1.3;
    --caption-style: normal;
    --caption-size-mobile: 10px;
    --caption-line-height-mobile: 1.3;

    /* Legacy aliases (backward compat) */
    --font-size-xs: var(--caption-size);
    --font-size-sm: 11px;
    --font-size-base: var(--body-size);
    --font-size-md: 13px;
    --font-size-lg: var(--h2-size);
    --font-size-xl: var(--h1-size);
    --font-size-2xl: 28px;
    --font-size-3xl: 32px;

    /* Mobile dimension overrides */
    --button-height-mobile: 44px;
    --button-width-mobile: 144px;
    --input-height-mobile: 44px;

    /* ── Accent alpha scale ──
       Translucent variants of --accent used for hover tints, focus
       rings, highlights, etc. color-mix keeps these in sync with the
       accent at runtime, so re-theming --accent propagates everywhere
       automatically. */
    --accent-a-04: color-mix(in srgb, var(--accent) 4%, transparent);
    --accent-a-08: color-mix(in srgb, var(--accent) 8%, transparent);
    --accent-a-10: color-mix(in srgb, var(--accent) 10%, transparent);
    --accent-a-12: color-mix(in srgb, var(--accent) 12%, transparent);
    --accent-a-15: color-mix(in srgb, var(--accent) 15%, transparent);
    --accent-a-30: color-mix(in srgb, var(--accent) 30%, transparent);
    --accent-a-40: color-mix(in srgb, var(--accent) 40%, transparent);
    --accent-a-50: color-mix(in srgb, var(--accent) 50%, transparent);

    /* ── Team role colors ──
       Distinct identifiers for role-tag badges. Keep these tokenized
       so role color assignment lives in one place. */
    --role-pm: #6ce6f4;
    --role-art: #bfaaf6;
    --role-ani: #6ce6f4;

    /* ── Integration brand colors ──
       Used in very light tints on link-card backgrounds to hint at
       the target service without being loud. */
    --brand-dropbox: #0061ff;
    --brand-discord: #5865f2;
    --brand-slides: #ea4335;
    --brand-dropbox-tint: color-mix(in srgb, var(--brand-dropbox) 6%, transparent);
    --brand-discord-tint: color-mix(in srgb, var(--brand-discord) 6%, transparent);
    --brand-slides-tint: color-mix(in srgb, var(--brand-slides) 6%, transparent);

    /* ── Shadows ── */
    --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.15);

    /* ── Radio / Circular Selector ──
       Border color for unchecked radio ring.
       Checked state uses --accent (handled in .radio-input). */
    --radio-border: rgba(255, 255, 255, 0.18);
}


/* ─────────────────────────────────────────────────────────────
   Global Scrollbar
   ───────────────────────────────────────────────────────────── */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}
/* Hide scrollbar on sidebar (keep existing behavior) */
.sidebar-top::-webkit-scrollbar,
.sidebar-top { scrollbar-width: none; }
.sidebar-top::-webkit-scrollbar { display: none; }


/* ─────────────────────────────────────────────────────────────
   Global Component Overrides
   ───────────────────────────────────────────────────────────── */

/* ── Inputs ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="url"],
input[type="number"],
select,
textarea {
    background-color: var(--input-1);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text);
    height: var(--input-height);
    padding: 0 var(--space-2);
    font-size: var(--font-size-base);
    font-family: var(--font);
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: box-shadow 0.15s;
}

input:focus,
select:focus,
textarea:focus {
    box-shadow: 0 0 0 1px var(--accent);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-label);
}

textarea {
    height: auto;
    padding: var(--space-1) var(--space-2);
}

select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: var(--space-4);
}

/* ── Labels ── */
.field label,
label {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-label);
    font-family: var(--font);
    letter-spacing: 0.02em;
}

/* ── Field Layout ── */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.field-row.single-col {
    grid-template-columns: 1fr;
}

/* ── Buttons (shared base) ── */
.btn-standard,
.btn-inverted,
.btn-gradient,
.btn-slim,
.btn-submit,
.btn-secondary,
.btn-add {
    height: var(--button-height);
    min-height: var(--button-height);
    min-width: var(--button-width);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
    font-weight: 600;
    font-family: var(--font);
    padding: 0 var(--space-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    box-sizing: border-box;
    line-height: 1;
    border: 0.75px solid transparent;
    text-decoration: none;
}

/* 1. Standard Button — gradient fill, dark text */
.btn-standard,
.btn-submit,
.btn-gradient {
    background: var(--gradient-brand);
    border-color: transparent;
    color: var(--on-accent);
}
.btn-standard:hover,
.btn-submit:hover,
.btn-gradient:hover {
    border: 0.75px solid transparent;
    background: linear-gradient(var(--body-bg), var(--body-bg)) padding-box,
                var(--gradient-brand) border-box;
    color: var(--accent);
    box-shadow: none;
    opacity: 1;
}
.btn-standard:active,
.btn-submit:active,
.btn-gradient:active {
    background: var(--gradient-brand);
    border-color: transparent;
    color: var(--on-accent);
    opacity: 0.7;
    box-shadow: none;
}

/* 2. Inverted Button — gradient stroke + gradient text */
.btn-inverted,
.btn-secondary {
    border: 0.75px solid transparent;
    background: linear-gradient(var(--body-bg), var(--body-bg)) padding-box,
                var(--gradient-brand) border-box;
    color: var(--accent);
}
.btn-inverted .step-pill-text,
.btn-secondary .step-pill-text,
.btn-inverted,
.btn-secondary {
    -webkit-text-fill-color: unset;
}
.btn-inverted:hover,
.btn-secondary:hover {
    background: var(--gradient-brand);
    border-color: transparent;
    color: var(--on-accent);
    box-shadow: none;
}
.btn-inverted:active,
.btn-secondary:active {
    border: 0.75px solid transparent;
    background: linear-gradient(var(--body-bg), var(--body-bg)) padding-box,
                var(--gradient-brand) border-box;
    color: var(--accent);
    box-shadow: none;
}

/* 3. Slim Button — subtle, muted, for secondary actions */
.btn-slim,
.btn-add {
    background: var(--card-2);
    border-color: var(--border-subtle);
    color: var(--text-label);
    font-size: var(--font-size-sm);
}
.btn-slim:hover,
.btn-add:hover {
    border: 0.75px solid transparent;
    background: linear-gradient(var(--body-bg), var(--body-bg)) padding-box,
                var(--gradient-brand) border-box;
    color: var(--accent);
}
.btn-slim:active,
.btn-add:active {
    background: var(--gradient-brand);
    border-color: transparent;
    color: var(--on-accent);
    border-color: var(--accent);
}

/* 5. Close/Delete Compact — small square × button */
.btn-close-compact {
    width: var(--button-height);
    height: var(--button-height);
    min-height: var(--button-height);
    padding: 0;
    background: var(--body-bg);
    border: 0.75px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: var(--font-size-lg);
    font-weight: 400;
    font-family: var(--font);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1;
    box-sizing: border-box;
}
.btn-close-compact:hover {
    border-color: var(--color-danger);
    color: var(--color-danger);
}
.btn-close-compact:active {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--on-accent);
}

/* 6. Delete Group — full-width danger button */
.btn-danger {
    height: var(--button-height);
    min-height: var(--button-height);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
    font-weight: 600;
    font-family: var(--font);
    padding: 0 var(--space-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
    box-sizing: border-box;
    line-height: 1;
    background: var(--body-bg);
    border: 0.75px solid transparent;
    color: var(--text-muted);
}
.btn-danger:hover {
    border-color: var(--color-danger);
    color: var(--color-danger);
}
.btn-danger:active {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--on-accent);
}

/* 7. Remove Format — slim danger variant */
.btn-danger-slim {
    height: var(--button-height);
    min-height: var(--button-height);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    font-family: var(--font);
    padding: 0 var(--space-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
    box-sizing: border-box;
    line-height: 1;
    background: var(--card-2);
    border: 0.75px solid var(--border-subtle);
    color: var(--text-label);
}
.btn-danger-slim:hover {
    border-color: var(--color-danger);
    color: var(--color-danger);
}
.btn-danger-slim:active {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--on-accent);
}

/* ── Radio / Circular Selector ──────────────────────────────────────────────
   Canonical design system class for ALL circular radio/checkbox selectors.
   Add class="radio-input" to any <input type="radio"> or <input type="checkbox">
   that should render as the circular dot-selector style.

   Paired helpers:
     .radio-opt       — <label> wrapper (flex row, cursor pointer)
     .radio-opt-label — text label inside the wrapper (auto-accents when checked)
   ─────────────────────────────────────────────────────────────────────────── */
/* The ring: just the outer circle border */
.radio-input {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    margin: 0;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid var(--radio-border);
    background: transparent;
    cursor: pointer;
    transition: border-color 0.15s;
}
.radio-input:checked {
    border-color: var(--accent);
}
.radio-input:hover:not(:checked) {
    border-color: var(--accent);
}

/* Label wrapper — position:relative so the ::before dot can be absolute */
.radio-opt {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
    position: relative;
}

/* Inner dot — drawn on the label's ::before pseudo-element.
   Avoids background/gradient rendering quirks on input[type="radio"]
   in some browsers. Centers a 7px dot over the 15px radio ring. */
.radio-opt::before {
    content: '';
    position: absolute;
    left: 4px;               /* (15px ring - 7px dot) / 2 = 4px */
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    pointer-events: none;    /* clicks pass through to the input */
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.radio-opt:has(.radio-input:checked)::before {
    transform: translateY(-50%) scale(1);
}

/* Text label */
.radio-opt-label {
    font-size: var(--font-size-sm);
    font-family: var(--font);
    color: var(--text-label);
    transition: color 0.15s;
}
.radio-opt:has(.radio-input:checked) .radio-opt-label {
    color: var(--accent);
}

/* ── Cards / Form Sections ── */
.form-section {
    background: var(--card-1);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-2);
}

.form-section h2 {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--accent);
    margin-bottom: var(--space-3);
}

/* ── Page Headers ── */
.page-title,
.page-header h1 {
    font-size: var(--font-size-2xl);
    font-weight: 500;
    color: var(--text);
    font-family: var(--font);
    margin: 0 0 var(--space-1);
}

.page-subtitle,
.subtitle {
    font-size: var(--font-size-lg);
    font-weight: 400;
    color: var(--text-muted);
    margin: 0;
}

/* ── Stepper Pills ── */
.step-pill {
    height: var(--stepper-height);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

.step-pill.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}


/* ── Scrollbar fix: scroll on wrapper, not inner content (DESKTOP ONLY) ──
   On mobile (<= 768px) the wrapper is intentionally fixed and the inner
   .main-content scrolls — see the mobile media query in style.css. */
@media (min-width: 769px) {
    .app-layout .main-content {
        overflow-y: visible;
        overflow-x: visible;
    }
}
.main-content-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--body-bg);
}


/* ─────────────────────────────────────────────────────────────
   Light Mode Overrides
   ───────────────────────────────────────────────────────────── */

:root[data-theme="light"] {
    --body-bg: #eef0f4;
    --body-bg-a25: rgba(238, 240, 244, 0.25);
    --card-1: #f5f6f9;
    --card-2: #e8eaef;
    --card-3: #e0e2e8;
    --card-4: #d8dae0;
    --input-1: #ffffff;
    --input-2: #ffffff;
    --input-3: #f0f1f5;
    --input-4: #ffffff;
    --sidebar-bg: #e6e8ed;
    --sidebar-card-1: #dfe1e6;
    --border: transparent;
    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-subtle-strong: rgba(0, 0, 0, 0.12);
    --border-dark: #d5d7dd;
    --bg-subtle: rgba(0, 0, 0, 0.02);
    --bg-hover: rgba(0, 0, 0, 0.04);
    --bg-hover-strong: rgba(0, 0, 0, 0.05);
    --bg-active: rgba(0, 0, 0, 0.06);
    --bg-active-strong: rgba(0, 0, 0, 0.1);
    --overlay-scrim: rgba(0, 0, 0, 0.45);
    --overlay-scrim-strong: rgba(0, 0, 0, 0.65);
    --scrollbar-thumb: #c5c8cf;
    --scrollbar-thumb-hover: #9ca3af;
    --text: #111827;
    --text-muted: #4b5563;
    --text-label: #9ca3af;
    --accent: #4a7cf5;
    --accent-hover: #3b6de6;
    --on-accent: #ffffff;
    --color-success: #177245;
    --color-danger: #b42318;
    --color-warning: #b45309;
    --color-primary: #4a7cf5;
    --color-secondary: #8b6cf5;
    --color-tertiary: #5bbac4;
    --color-base-white: #fafefe;
    --gradient-brand: linear-gradient(135deg, #8b6cf5, #4a7cf5, #5bbac4);
    --pink: #0f766e;
    --cyan: #0d9488;
    --shadow-soft: 0 8px 30px rgba(15, 23, 42, 0.06);
    --radio-border: rgba(0, 0, 0, 0.2);
}


/* ─────────────────────────────────────────────────────────────
   Responsive Overrides (Mobile ≤ 768px)
   ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    :root {
        --h1-size: var(--h1-size-mobile);
        --h1-line-height: var(--h1-line-height-mobile);
        --h2-size: var(--h2-size-mobile);
        --h2-line-height: var(--h2-line-height-mobile);
        --h3-size: var(--h3-size-mobile);
        --h3-line-height: var(--h3-line-height-mobile);
        --body-size: var(--body-size-mobile);
        --body-line-height: var(--body-line-height-mobile);
        --caption-size: var(--caption-size-mobile);
        --caption-line-height: var(--caption-line-height-mobile);
        --button-height: var(--button-height-mobile);
        --button-width: var(--button-width-mobile);
        --input-height: var(--input-height-mobile);
        --space-4: 24px;
        --space-6: 40px;
    }
}