/* SAGE Layout Tokens v2 */
/* Loaded AFTER design-system.css -- extends the token system with layout chrome,
   renderer tokens, and dark mode overrides. */

/* ============================================================
   LAYOUT DIMENSIONS
   ============================================================ */
:root {
    --header-height: 48px;
    --footer-height: 58px;
    --mega-menu-height: 45vh;
    --layout-padding: 16px;

    /* Z-index hierarchy (layout chrome) */
    --z-header: 1000;
    --z-mega-menu: 900;
    --z-footer: 900;
    --z-floating-panel: 1100;
    --z-modal: 2000;
}

/* ============================================================
   GREY UTILITY SCALE
   Named constants for the core palette. Every grey hex in the
   app traces back to one of these. These do NOT change between
   light and dark mode — semantic tokens select which to use.
   ============================================================ */
:root {
    --grey-white: #ffffff;
    --grey-near-white: #fcfcfc;
    --grey-lightest: #eeeeee;
    --grey-lighter: #dddddd;
    --grey-light: #cccccc;
    --grey-soft: #bbbbbb;
    --grey-silver: #aaaaaa;
    --grey-steel: #999999;
    --grey-mid: #888888;
    --grey-muted: #777777;
    --grey-dim: #666666;
    --grey-dark: #555555;
    --grey-darker: #333333;
    --grey-darker-light: #444444;
    --grey-darkest: #222222;
    --grey-charcoal: #1a1a1a;
    --grey-deep: #111111;
    --grey-black: #000000;
}

/* ============================================================
   LAYOUT SEMANTIC TOKENS (light mode)
   Reference grey utility scale above. Dark mode overrides below
   swap which utility token each semantic token points to.
   ============================================================ */
:root {
    /* Surfaces */
    --bg-base: var(--grey-lightest);
    --bg-raised: var(--grey-near-white);
    --bg-raised-hover: var(--grey-white);
    --bg-lower: var(--grey-lighter);
    --bg-lower-2: var(--grey-light);
    --bg-inverse: var(--grey-darkest);

    /* Text */
    --text-primary: var(--grey-deep);
    --text-secondary: var(--grey-dark);
    --text-muted: var(--grey-steel);

    /* Borders (full shorthand — usage: border: var(--border-ui)) */
    --border-default: 1px solid var(--grey-soft);
    --border-ui: 1px solid var(--grey-light);

    /* Content borders — softer than UI borders, for dividers within content areas */
    --border-content-default: 1px solid var(--grey-lighter);
    --border-content-strong: 1px solid var(--grey-dark);

    /* Buttons */
    --btn-bg: var(--grey-lightest);
    --btn-bg-hover: var(--color-hover);
    --btn-border: var(--grey-light);
    --btn-border-hover: var(--grey-steel);
    --btn-border-active: var(--grey-dim);

    /* Shadows */
    --shadow-raised: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    --shadow-raised-hover: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* Dot grid */
    --dot-color: var(--grey-light);
    --dot-grid-bg: radial-gradient(circle, var(--dot-color) 1px, transparent 1px);
    --dot-grid-size: 8px;

    /* Footer preview text */
    --footer-preview-text: var(--grey-muted);
    --footer-preview-divider: var(--grey-light);
}

/* ============================================================
   RENDERER TOKENS (light mode)
   Used by SVG renderers (via StyleConfig/getComputedStyle)
   and by DOM overlays (DOMOverlaySystem, StepEditForm) directly.
   ============================================================ */
:root {
    /* --- Pixi canvas --- */
    --fractal-canvas-bg: var(--grey-lightest);

    /* --- Step cards (drawn by Pixi) --- */
    --fractal-step-bg: white;
    --fractal-step-border: var(--grey-light);
    --fractal-step-border-decision: #ffd700;
    --fractal-step-border-nested: var(--color-slate-500);
    --fractal-step-border-highlight: var(--color-info);
    --fractal-step-text: var(--grey-darker);
    --fractal-step-text-secondary: var(--grey-dim);

    /* --- Step dimensions (unitless, consumed by StyleConfig) --- */
    --fractal-step-width: 200;
    --fractal-step-height: 100;
    --fractal-corner-radius: 8;
    --fractal-step-gap: 40;
    --fractal-branch-gap: 80;
    --fractal-font-size-action: 13;
    --fractal-font-size-actor: 10;

    /* --- Story block dimensions (homepage, unitless) --- */
    --fractal-story-width: 260;
    --fractal-story-height: 130;

    /* --- Connections / arrows --- */
    --fractal-connection: var(--grey-silver);

    /* --- Nested story containers --- */
    --fractal-nested-bg: var(--grey-lightest);
    --fractal-nested-border: var(--color-slate-500);

    /* --- Status chips on steps --- */
    --fractal-chip-decision-bg: rgba(255, 179, 71, 0.15);
    --fractal-chip-decision-text: #b8860b;
    --fractal-chip-nested-bg: rgba(104, 119, 166, 0.15);
    --fractal-chip-nested-text: var(--color-slate-500);
    --fractal-chip-loop-bg: rgba(255, 71, 105, 0.15);
    --fractal-chip-loop-text: #e53e3e;

    /* --- Task status chips --- */
    --fractal-task-inprogress-bg: rgba(59, 130, 246, 0.15);
    --fractal-task-inprogress-text: #3b82f6;
    --fractal-task-pending-bg: rgba(245, 158, 11, 0.15);
    --fractal-task-pending-text: #f59e0b;
    --fractal-task-done-bg: rgba(34, 197, 94, 0.15);
    --fractal-task-done-text: #22c55e;

    /* --- DOM Overlays (menus, edit forms, insert/add buttons) --- */
    --fractal-overlay-bg: white;
    --fractal-overlay-border: var(--grey-lightest);
    --fractal-overlay-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --fractal-overlay-text: var(--grey-darker);
    --fractal-overlay-text-secondary: var(--grey-steel);
    --fractal-overlay-hover-bg: var(--grey-lightest);
    --fractal-overlay-input-border: var(--grey-lighter);
    --fractal-overlay-input-focus: #2563eb;
}

/* ============================================================
   DARK MODE OVERRIDES
   Triggered by system preference OR manual .dark class on :root.
   Overrides BOTH the existing design-system.css tokens AND
   the new layout tokens above.
   ============================================================ */

/* System preference detection */
@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        /* --- Surfaces --- */
        --bg-base: var(--grey-charcoal);
        --bg-raised: var(--grey-darker);
        --bg-raised-hover: var(--grey-darker-light);
        --bg-lower: var(--grey-black);
        --bg-lower-2: var(--grey-black);
        --bg-inverse: var(--grey-black);
        --bg-primary: var(--grey-darker);
        --bg-secondary: var(--grey-deep);
        --bg-muted: var(--grey-black);
        --bg-disabled: var(--grey-darker);

        /* --- Text --- */
        --text-primary: var(--grey-lightest);
        --text-secondary: var(--grey-silver);
        --text-muted: var(--grey-dim);
        --text-disabled: var(--grey-dark);

        /* --- Borders --- */
        --border-default: 1px solid var(--grey-dark);
        --border-ui: 1px solid var(--grey-black);
        --border-content-default: 1px solid var(--grey-dark);
        --border-content-strong: 1px solid var(--grey-silver);
        --border-color-light: var(--grey-darkest);
        --border-color-medium: var(--grey-darker);
        --border-color-dark: var(--grey-dark);
        --border-color-focus: #3b82f6;

        /* --- Interactive --- */
        --color-hover: var(--grey-darker-light);
        --color-hover-dark: var(--grey-dark);
        --color-active: var(--grey-dark);

        --btn-primary-bg: var(--text-secondary);
        --btn-primary-text: var(--bg-base);
        --btn-primary-hover: var(--grey-soft);
        --btn-primary-active: var(--grey-light);

        --btn-inverse-bg: var(--bg-lower);
        --btn-inverse-text: var(--grey-near-white);
        --btn-inverse-hover: var(--grey-darkest);
        --btn-inverse-active: var(--bg-inverse);

        --btn-secondary-bg: transparent;
        --btn-secondary-text: var(--text-secondary);
        --btn-secondary-border: var(--grey-dark);
        --btn-secondary-hover-bg: var(--color-hover);
        --btn-secondary-hover-text: var(--text-primary);
        --btn-secondary-hover-border: var(--grey-dark);

        --btn-bg: var(--grey-darkest);
        --btn-bg-hover: var(--color-hover);
        --btn-border: var(--grey-darker);
        --btn-border-hover: var(--grey-dim);
        --btn-border-active: var(--grey-mid);

        /* --- Shadows --- */
        --shadow-raised: 0 2px 4px 0 rgba(0, 0, 0, 0.20);
        --shadow-raised-hover: 0 2px 4px 0 rgba(0, 0, 0, 0.30);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
        --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);

        /* --- Dot grid --- */
        --dot-color: var(--grey-black);
        --dot-grid-bg: radial-gradient(circle, var(--dot-color) 1px, transparent 1px);

        /* --- Legacy main.css tokens --- */
        --mono-text: var(--grey-light);
        --mono-text-secondary: var(--grey-steel);
        --mono-text-light: var(--grey-dim);

        /* --- Footer --- */
        --footer-preview-text: var(--grey-steel);
        --footer-preview-divider: var(--grey-darker);

        /* --- Renderer tokens (dark) --- */
        --fractal-canvas-bg: var(--grey-charcoal);
        --fractal-step-bg: var(--grey-darker);
        --fractal-step-border: var(--grey-dim);
        --fractal-step-border-decision: #ffd700;
        --fractal-step-border-nested: var(--color-slate-400);
        --fractal-step-border-highlight: #22d3ee;
        --fractal-step-text: var(--grey-light);
        --fractal-step-text-secondary: var(--grey-steel);
        --fractal-nested-bg: var(--grey-deep);
        --fractal-nested-border: var(--color-slate-400);
        --fractal-connection: var(--grey-dark);

        --fractal-chip-decision-bg: rgba(255, 179, 71, 0.1);
        --fractal-chip-decision-text: #d4a017;
        --fractal-chip-nested-bg: rgba(104, 119, 166, 0.1);
        --fractal-chip-nested-text: var(--color-slate-400);
        --fractal-chip-loop-bg: rgba(255, 71, 105, 0.1);
        --fractal-chip-loop-text: #ff6b6b;

        --fractal-task-inprogress-bg: rgba(59, 130, 246, 0.1);
        --fractal-task-inprogress-text: #60a5fa;
        --fractal-task-pending-bg: rgba(245, 158, 11, 0.1);
        --fractal-task-pending-text: #fbbf24;
        --fractal-task-done-bg: rgba(34, 197, 94, 0.1);
        --fractal-task-done-text: #4ade80;

        --fractal-overlay-bg: var(--grey-darker);
        --fractal-overlay-border: var(--grey-darkest);
        --fractal-overlay-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        --fractal-overlay-text: var(--grey-light);
        --fractal-overlay-text-secondary: var(--grey-mid);
        --fractal-overlay-hover-bg: var(--grey-dark);
        --fractal-overlay-input-border: var(--grey-darker);
        --fractal-overlay-input-focus: #3b82f6;
    }
}

/* Manual dark mode toggle (class on :root) */
:root.dark {
    /* --- Surfaces --- */
    --bg-base: var(--grey-charcoal);
    --bg-raised: var(--grey-darker);
    --bg-raised-hover: var(--grey-darker-light);
    --bg-lower: var(--grey-black);
    --bg-lower-2: var(--grey-black);
    --bg-inverse: var(--grey-black);
    --bg-primary: var(--grey-darker);
    --bg-secondary: var(--grey-deep);
    --bg-muted: var(--grey-black);
    --bg-disabled: var(--grey-darker);

    /* --- Text --- */
    --text-primary: var(--grey-lightest);
    --text-secondary: var(--grey-silver);
    --text-muted: var(--grey-dim);
    --text-disabled: var(--grey-dark);

    /* --- Borders --- */
    --border-default: 1px solid var(--grey-dark);
    --border-ui: 1px solid var(--grey-black);
    --border-content-default: 1px solid var(--grey-dark);
    --border-content-strong: 1px solid var(--grey-silver);
    --border-color-light: var(--grey-darkest);
    --border-color-medium: var(--grey-darker);
    --border-color-dark: var(--grey-dark);
    --border-color-focus: #3b82f6;

    /* --- Interactive --- */
    --color-hover: var(--grey-darker-light);
    --color-hover-dark: var(--grey-dark);
    --color-active: var(--grey-dark);

    --btn-primary-bg: var(--text-secondary);
    --btn-primary-text: var(--bg-base);
    --btn-primary-hover: var(--grey-soft);
    --btn-primary-active: var(--grey-light);

    --btn-inverse-bg: var(--bg-lower);
    --btn-inverse-text: var(--grey-near-white);
    --btn-inverse-hover: var(--grey-darkest);
    --btn-inverse-active: var(--bg-inverse);

    --btn-secondary-bg: transparent;
    --btn-secondary-text: var(--text-secondary);
    --btn-secondary-border: var(--grey-dark);
    --btn-secondary-hover-bg: var(--color-hover);
    --btn-secondary-hover-text: var(--text-primary);
    --btn-secondary-hover-border: var(--grey-dark);

    --btn-bg: var(--grey-darkest);
    --btn-bg-hover: var(--color-hover);
    --btn-border: var(--grey-darker);
    --btn-border-hover: var(--grey-dim);
    --btn-border-active: var(--grey-mid);

    /* --- Shadows --- */
    --shadow-raised: 0 2px 4px 0 rgba(0, 0, 0, 0.20);
    --shadow-raised-hover: 0 2px 4px 0 rgba(0, 0, 0, 0.30);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);

    /* --- Dot grid --- */
    --dot-color: var(--grey-black);
    --dot-grid-bg: radial-gradient(circle, var(--dot-color) 1px, transparent 1px);

    /* --- Legacy main.css tokens --- */
    --mono-text: var(--grey-light);
    --mono-text-secondary: var(--grey-steel);
    --mono-text-light: var(--grey-dim);

    /* --- Footer --- */
    --footer-preview-text: var(--grey-steel);
    --footer-preview-divider: var(--grey-darker);

    /* --- Renderer tokens (dark) --- */
    --fractal-canvas-bg: var(--grey-charcoal);
    --fractal-step-bg: var(--grey-darker);
    --fractal-step-border: var(--grey-dim);
    --fractal-step-border-decision: #ffd700;
    --fractal-step-border-nested: var(--color-slate-400);
    --fractal-step-border-highlight: #22d3ee;
    --fractal-step-text: var(--grey-light);
    --fractal-step-text-secondary: var(--grey-steel);
    --fractal-nested-bg: var(--grey-deep);
    --fractal-nested-border: var(--color-slate-400);
    --fractal-connection: var(--grey-dark);

    --fractal-chip-decision-bg: rgba(255, 179, 71, 0.1);
    --fractal-chip-decision-text: #d4a017;
    --fractal-chip-nested-bg: rgba(104, 119, 166, 0.1);
    --fractal-chip-nested-text: var(--color-slate-400);
    --fractal-chip-loop-bg: rgba(255, 71, 105, 0.1);
    --fractal-chip-loop-text: #ff6b6b;

    --fractal-task-inprogress-bg: rgba(59, 130, 246, 0.1);
    --fractal-task-inprogress-text: #60a5fa;
    --fractal-task-pending-bg: rgba(245, 158, 11, 0.1);
    --fractal-task-pending-text: #fbbf24;
    --fractal-task-done-bg: rgba(34, 197, 94, 0.1);
    --fractal-task-done-text: #4ade80;

    --fractal-overlay-bg: var(--grey-darker);
    --fractal-overlay-border: var(--grey-darkest);
    --fractal-overlay-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    --fractal-overlay-text: var(--grey-light);
    --fractal-overlay-text-secondary: var(--grey-mid);
    --fractal-overlay-hover-bg: var(--grey-dark);
    --fractal-overlay-input-border: var(--grey-darker);
    --fractal-overlay-input-focus: #3b82f6;
}

/* ============================================================
   DOT GRID CANVAS — shared background for all workspace views.
   Add this class to any container that needs the dot grid.
   Zoom-aware renderers (SVG flow, system) dynamically override
   background-size and background-position via JS.
   ============================================================ */
.dot-grid-canvas {
    background-color: var(--bg-base);
    background-image: var(--dot-grid-bg);
    background-size: var(--dot-grid-size) var(--dot-grid-size);
}

/* ============================================================
   CARD STYLE TEMPLATES
   Reusable card surface classes. Apply to any card element
   (HTML or SVG) for consistent surface treatment.
   ============================================================ */
.card-raised {
    background: var(--bg-raised);
    border: 1px solid var(--bg-raised);
    box-shadow: none;
    transition: all 0.3s ease;
}
.card-raised:hover {
    background: var(--bg-raised-hover);
    box-shadow: var(--shadow-raised);
}

@media (prefers-color-scheme: dark) {
    :root:not(.light) .card-raised:hover {
        color: var(--grey-white);
    }
}
:root.dark .card-raised:hover {
    color: var(--grey-white);
}

.card-base {
    background: var(--bg-base);
    border: var(--border-default);
    box-shadow: none;
    transition: all 0.3s ease;
}

/* ============================================================
   SVG SURFACE CLASSES
   SVG equivalents of card classes above. SVG uses fill/stroke
   instead of background/border, so these mirror the same tokens.
   ============================================================ */
.svg-surface-raised {
    fill: var(--bg-raised);
    stroke: var(--bg-raised);
    stroke-width: 1;
    transition: all 0.3s ease;
}

.svg-surface-raised-hover {
    fill: var(--bg-raised-hover);
    filter: var(--svg-shadow, drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05)));
}

.svg-surface-base {
    fill: var(--bg-base);
    stroke: var(--grey-steel);
    stroke-width: 1;
    transition: all 0.3s ease;
}

/* ============================================================
   ICON UTILITY CLASSES
   Used with SVG sprite: <svg class="icon"><use href="#icon-name"></use></svg>
   Inherits color from parent via currentColor.
   ============================================================ */
svg.icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
svg.icon-sm  { width: 0.875em; height: 0.875em; }
svg.icon-lg  { width: 1.25em;  height: 1.25em; }
svg.icon-xl  { width: 1.5em;   height: 1.5em; }
svg.icon-2x  { width: 2em;     height: 2em; }
svg.icon-fixed-16 { width: 16px; height: 16px; }
svg.icon-fixed-18 { width: 18px; height: 18px; }
svg.icon-fixed-20 { width: 20px; height: 20px; }
svg.icon-fixed-24 { width: 24px; height: 24px; }