/*
 * ptePractice Reading design tokens
 *
 * Architecture:
 * 1. Base scale: raw primitives extracted from the canonical guest welcome page.
 * 2. Semantic tokens: purpose-named aliases consumed by components.
 * 3. Responsive scaffolding: empty breakpoint overrides for future tablet/laptop/mobile work.
 *
 * Consumption rule:
 * Components should consume semantic tokens only.
 * Base tokens exist to define the system and to support one-off infrastructure values only when
 * no semantic token fits.
 *
 * Extension rule:
 * If a new component needs a design value that does not map cleanly to an existing semantic token,
 * add a semantic token first. Do not hardcode a new hex or pixel literal in component CSS.
 */

:root {
    /* Base: font family */
    /* Found in: legacy app shell root, still used by canonical welcome page chrome */
    --font-family-ui: "Segoe UI", Tahoma, sans-serif;

    /* Base: spacing scale */
    /* Found in: welcome task copy, inline text spacing */
    --space-0: 0;
    --space-1: 1px;
    --space-2: 2px;
    --space-3: 3px;
    --space-4: 4px;
    --space-5: 5px;
    --space-6: 6px;
    --space-7: 7px;
    --space-8: 8px;
    --space-9: 9px;
    --space-10: 10px;
    --space-11: 11px;
    --space-12: 12px;
    --space-13: 13px;
    --space-14: 14px;
    --space-15: 15px;
    --space-16: 16px;
    --space-18: 18px;
    --space-20: 20px;
    --space-22: 22px;
    --space-24: 24px;
    --space-28: 28px;
    --space-30: 30px;
    --space-32: 32px;
    --space-34: 34px;
    --space-36: 36px;
    --space-40: 40px;
    --space-42: 42px;
    --space-44: 44px;
    --space-46: 46px;
    --space-48: 48px;
    --space-56: 56px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;
    --space-128: 128px;

    /* Base: color scale */
    /* Found in: canonical welcome page shell and hero */
    --color-paper-0: #fbfbf9;
    --color-paper-25: #f3f2ec;
    --color-paper-line: #edede7;
    --color-paper-tint: #f4f4ef;
    --color-surface-0: #ffffff;
    --color-surface-glass: rgba(255, 255, 255, 0.58);
    --color-transparent: transparent;

    /* Found in: canonical welcome hero and header text */
    --color-ink-950: #0f172a;
    --color-ink-900: #10233e;
    --color-ink-850: #112e52;
    --color-ink-800: #1f2937;
    --color-ink-700: #4f5f76;
    --color-ink-650: #667085;
    --color-ink-600: #7d8798;
    --color-ink-550: #98a2b3;
    --color-ink-500: #9ea7b5;
    --color-ink-450: #a8b0be;
    --color-ink-400: #b0b6c0;

    /* Found in: canonical welcome interactive accent and active nav marker */
    --color-blue-700: #185fa5;
    --color-blue-600: #1565c0;
    --color-blue-100: #e6f1fb;
    --color-blue-50: #f0f7ff;
    --color-blue-focus: #bfdbfe;

    /* Found in: canonical welcome shell lines and inherited header chrome */
    --color-line-300: #d8e2ef;
    --color-line-250: #dbe5f1;
    --color-line-225: #e5ecf4;
    --color-line-200: #e7edf4;

    /* Found in: brand mark and mixed-practice badge on canonical welcome */
    --color-brand-green: #10b981;
    --color-brand-violet-600: #4354b8;
    --color-brand-violet-500: #6366f1;
    --color-brand-violet-50: #eef2ff;

    /* Found in: semantic feedback states elsewhere in Reading flow */
    --color-success-600: #16a34a;
    --color-success-100: #bbf7d0;
    --color-success-50: #f0fdf4;
    --color-danger-600: #dc2626;
    --color-danger-100: #fecaca;
    --color-danger-50: #fef2f2;
    --color-warning-700: #b54708;

    /* Base: typography sizes */
    /* Found in: canonical welcome page type ramp */
    --font-size-072: 0.72rem;
    --font-size-082: 0.82rem;
    --font-size-083: 0.83rem;
    --font-size-084: 0.84rem;
    --font-size-086: 0.86rem;
    --font-size-087: 0.87rem;
    --font-size-090: 0.9rem;
    --font-size-0905: 0.90625rem;
    --font-size-092: 0.92rem;
    --font-size-094: 0.94rem;
    --font-size-097: 0.97rem;
    --font-size-0969: 0.96875rem;
    --font-size-098: 0.98rem;
    --font-size-100: 1rem;
    --font-size-102: 1.02rem;
    --font-size-103: 1.03rem;
    --font-size-065625: 0.65625rem;
    --font-size-0719: 0.71875rem;
    --font-size-075: 0.75rem;
    --font-size-078125: 0.78125rem;
    --font-size-08125: 0.8125rem;
    --font-size-084375: 0.84375rem;
    --font-size-hero-min: 2.8rem;
    --font-size-hero-max: 4.5rem;

    /* Base: font weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Base: line heights */
    --line-height-1: 1;
    --line-height-106: 1.06;
    --line-height-110: 1.1;
    --line-height-120: 1.2;
    --line-height-125: 1.25;
    --line-height-130: 1.3;
    --line-height-135: 1.35;
    --line-height-140: 1.4;
    --line-height-145: 1.45;
    --line-height-162: 1.62;

    /* Base: tracking */
    --tracking-tightest: -0.045em;
    --tracking-tight: -0.03em;
    --tracking-soft-tight: -0.01em;
    --tracking-soft-tightest: -0.005em;
    --tracking-base: 0;
    --tracking-soft: 0.01em;
    --tracking-eyebrow: 0.08em;

    /* Base: border widths */
    --border-width-none: 0;
    --border-width-hairline: 0.5px;
    --border-width-default: 1px;
    --border-width-accent: 1.5px;
    --border-width-strong: 2px;

    /* Base: border radii */
    --radius-none: 0;
    --radius-field: 10px;
    --radius-card: 14px;
    --radius-pill: 999px;

    /* Base: motion */
    /* Found in: reading dropdown transitions */
    --motion-duration-fast: 150ms;
    --motion-ease-standard: ease-out;
    --motion-duration-icon-short: 250ms;
    --motion-duration-icon-medium: 280ms;
    --motion-duration-icon-long: 320ms;
    --motion-ease-micro: cubic-bezier(0.16, 1, 0.3, 1);

    /* Base: shadows */
    /* Found in: canonical welcome hover and brand marker */
    --shadow-none: none;
    --shadow-brand-dot: 0 0 0 1px rgba(16, 185, 129, 0.08);
    --shadow-card-hover-inset: inset 0 0 0 1px rgba(21, 101, 192, 0.08);
    --shadow-dropdown: 0 8px 24px rgba(15, 42, 71, 0.10), 0 2px 6px rgba(15, 42, 71, 0.06);

    /* Base: z-index */
    /* Found in: reading dropdown/backdrop stack */
    --z-reading-menu-backdrop: 44;
    --z-reading-menu: 45;

    /* Semantic: app shell */
    --bg-page: var(--color-paper-0);
    --bg-surface: var(--color-surface-0);
    --bg-surface-muted: var(--color-surface-glass);
    --bg-surface-hover: var(--color-blue-50);
    --bg-surface-open: var(--color-paper-25);
    --bg-icon-subtle: var(--color-paper-tint);
    --bg-brand-marker: var(--color-brand-violet-50);

    --text-primary: var(--color-ink-850);
    --text-strong: var(--color-ink-900);
    --text-emphasis: var(--color-ink-950);
    --text-secondary: var(--color-ink-700);
    --text-muted: var(--color-ink-650);
    --text-subtle: var(--color-ink-600);
    --text-faint: var(--color-ink-550);
    --text-eyebrow: var(--color-ink-500);
    --text-disabled: var(--color-ink-450);
    --text-tab-idle: var(--color-ink-400);
    --text-link: var(--color-ink-900);
    --text-link-hover: var(--color-blue-700);
    --text-on-emphasis: var(--color-surface-0);
    --text-brand-marker: var(--color-brand-violet-600);
    --text-brand-marker-strong: var(--color-brand-violet-500);
    --text-success: var(--color-success-600);
    --text-danger: var(--color-danger-600);
    --text-warning: var(--color-warning-700);
    --practice-text-primary: #1f2937;
    --practice-text-secondary: #6b7280;
    --practice-text-muted: #9ca3af;

    --border-default: var(--color-paper-line);
    --border-subtle: var(--color-paper-line);
    --border-shell: var(--color-line-225);
    --border-header: var(--color-paper-line);
    --border-accent: var(--color-blue-600);
    --border-focus: var(--color-blue-focus);

    --accent-brand: var(--color-brand-green);
    --accent-action: var(--color-blue-600);
    --accent-action-dark: #0f4c8f;
    --accent-action-hover: var(--color-blue-700);
    --accent-action-subtle: var(--color-blue-100);
    --accent-action-soft: var(--color-blue-50);
    --accent-action-soft-bg: #f4f8fd;
    --accent-action-soft-border: #b5d4f4;
    --accent-action-soft-border-subtle: #b5d4f4;
    --accent-success: var(--color-success-600);
    --accent-danger: var(--color-danger-600);

    --bg-success-subtle: var(--color-success-50);
    --bg-danger-subtle: var(--color-danger-50);
    --border-success-subtle: var(--color-success-100);
    --border-danger-subtle: var(--color-danger-100);
    --border-strong: #d1cfc7;
    --success-fill: #f4fdf6;
    --success-fill-darker: #bbf7d0;
    --success-fill-stronger: #e1f5ee;
    --success-border: #bbf7d0;
    --success-text: #0f6e56;
    --success-text-stronger: #166534;
    --success-text-dark: #14532d;
    --success-strong: #16a34a;
    --danger-fill: #fef7f7;
    --danger-fill-darker: #fecaca;
    --danger-fill-stronger: #fcebeb;
    --danger-border: #fecaca;
    --danger-text: #a32d2d;
    --danger-strong: #dc2626;
    --warning-fill-darker: #faeeda;
    --warning-border: #faeeda;
    --warning-border-strong: #fac775;
    --warning-accent: #ba7517;
    --warning-text-dark: #633806;
    --warning-fill: #fef6e1;
    --warning-text: #854f0b;
    --warm-gray-soft: #f3f2ec;
    --warm-gray-strong: #c7c5bd;
    --text-primary-darker: #374151;
    --bg-modal: var(--bg-page);
    --border-modal: var(--border-subtle);
    --backdrop-overlay: rgba(15, 42, 71, 0.42);
    --shadow-auth-modal: 0 8px 24px rgba(15, 42, 71, 0.08);
    --input-border-default: #d1cfc7;
    --input-border-hover: #9ca3af;
    --input-border-focus: var(--accent-action);
    --input-bg-default: var(--bg-page);
    --input-bg-active: var(--bg-surface);
    --auth-modal-padding: var(--space-32);
    --auth-modal-radius: var(--space-14);
    --auth-field-gap: var(--space-18);
    --auth-field-inner-gap: var(--space-6);

    --shadow-interactive-hover: var(--shadow-card-hover-inset);

    /* Semantic: spacing */
    --padding-page-x: var(--space-24);
    --padding-page-y: var(--space-20);
    --padding-shell-x: var(--space-24);
    --padding-shell-y: var(--space-18);
    --padding-header-bottom: var(--space-10);
    --padding-hero-top: var(--space-56);
    --padding-hero-x: var(--space-10);
    --padding-hero-bottom: var(--space-22);
    --padding-section-top: var(--space-24);
    --padding-section-bottom: var(--space-36);
    --padding-card-y: var(--space-13);
    --padding-card-x: var(--space-15);
    --padding-footer-top: var(--space-28);
    --padding-inline-link-bottom: var(--space-1);
    --padding-reading-menu-header-y: var(--space-12);
    --padding-reading-menu-header-x: var(--space-14);
    --padding-reading-menu-item-y: var(--space-12);
    --padding-reading-menu-item-x: var(--space-14);

    --gap-shell: var(--space-10);
    --gap-header-main: var(--space-14);
    --gap-header-left: var(--space-28);
    --gap-header-right: var(--space-12);
    --gap-nav: var(--space-22);
    --gap-hero: var(--space-18);
    --gap-section: var(--space-18);
    --gap-block: var(--space-14);
    --gap-element: var(--space-12);
    --gap-tight: var(--space-2);
    --gap-task-header: var(--space-18);
    --gap-task-header-main: var(--space-16);
    --gap-task-grid-row: var(--space-12);
    --gap-task-grid-column: var(--space-14);
    --gap-reading-menu-item: var(--space-12);
    --gap-reading-menu-copy: var(--space-2);
    --gap-reading-menu-usage: var(--space-2);
    --gap-section-practice: var(--space-48);
    --gap-block-practice: var(--space-24);
    --gap-element-practice: var(--space-12);
    --gap-tight-practice: var(--space-8);

    --space-task-grid-top: var(--space-20);
    --space-shell-offset: var(--space-44);

    /* Semantic: sizing */
    --size-shell-max-width: 1640px;
    --size-hero-measure: 980px;
    --size-body-measure: 860px;
    --size-practice-mode-menu-min-width: 200px;
    --size-question-browser-width: 480px;
    --size-task-line-width: 224px;
    --size-task-line-width-laptop: 152px;
    --size-task-line-width-mobile: 96px;
    --size-task-icon: var(--space-34);
    --size-welcome-task-section-min-height-desktop: calc(var(--space-128) + var(--space-128) + var(--space-64));
    --size-reading-menu-width: 340px;
    --size-reading-menu-icon: 30px;
    --size-task-icon-glyph: var(--space-18);

    /* Semantic: typography */
    --text-nav-size: var(--font-size-098);
    --text-nav-weight: var(--font-weight-bold);
    --text-eyebrow-size: var(--font-size-090);
    --text-eyebrow-weight: var(--font-weight-medium);
    --text-eyebrow-line-height: var(--line-height-120);
    --text-eyebrow-tracking: var(--tracking-soft);
    --text-home-header-label-size: var(--font-size-082);
    --text-home-header-label-weight: var(--font-weight-medium);
    --text-home-header-label-line-height: var(--line-height-110);
    --text-home-header-label-tracking: var(--tracking-eyebrow);
    --text-hero-size: clamp(var(--font-size-hero-min), 4.1vw, var(--font-size-hero-max));
    --text-hero-weight: var(--font-weight-medium);
    --text-hero-line-height: var(--line-height-106);
    --text-hero-tracking: var(--tracking-tightest);
    --text-body-large-size: var(--font-size-102);
    --text-body-large-line-height: var(--line-height-162);
    --text-body-size: var(--font-size-097);
    --text-body-line-height: var(--line-height-140);
    --text-meta-size: var(--font-size-094);
    --text-meta-weight: var(--font-weight-medium);
    --text-meta-soft-size: var(--font-size-082);
    --text-meta-soft-weight: var(--font-weight-regular);
    --text-meta-soft-line-height: var(--line-height-110);
    --text-meta-soft-tracking: var(--tracking-eyebrow);
    --text-card-title-size: var(--font-size-094);
    --text-card-title-weight: var(--font-weight-medium);
    --text-card-title-line-height: var(--line-height-125);
    --text-card-subtitle-size: var(--font-size-084);
    --text-card-subtitle-line-height: var(--line-height-135);
    --text-card-meta-size: var(--font-size-083);
    --text-card-meta-weight: var(--font-weight-medium);
    --text-button-size: var(--font-size-084);
    --text-button-weight: var(--font-weight-semibold);
    --text-reading-menu-title-size: var(--font-size-100);
    --text-reading-menu-title-weight: var(--font-weight-medium);
    --text-reading-menu-subtitle-size: var(--font-size-092);
    --text-reading-menu-status-size: var(--font-size-092);
    --text-reading-menu-status-secondary-size: var(--font-size-082);

    /* Semantic: borders and radii */
    --border-shell-width: var(--border-width-default);
    --border-default-width: var(--border-width-hairline);
    --border-focus-width: var(--border-width-strong);
    --radius-shell: var(--radius-card);
    --radius-button: var(--radius-field);
    --radius-button-compact: var(--space-7);
    --radius-icon: var(--radius-field);
    --radius-pill-soft: var(--radius-pill);
    --radius-menu: var(--radius-card);
    --radius-menu-icon: var(--radius-field);

    /* Semantic: motion */
    --transition-hover-accent: border-color var(--motion-duration-fast) var(--motion-ease-standard),
        background-color var(--motion-duration-fast) var(--motion-ease-standard),
        box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
    --motion-duration-dropdown-open: 180ms;
    --motion-duration-dropdown-close: 140ms;
    --motion-duration-panel-open: 280ms;
    --motion-duration-panel-close: 220ms;
    --stroke-task-icon-width: 1.9;

    /* Semantic: overlays and separators */
    --bg-overlay-subtle: rgba(15, 42, 71, 0.04);
    --shadow-dropdown-soft: 0 4px 12px rgba(15, 42, 71, 0.06);
    --shadow-panel-separator: -4px 0 12px rgba(15, 42, 71, 0.04);

    /* Legacy compatibility aliases for partially migrated Reading screens */
    --pte-blue-600: var(--accent-action);
    --pte-blue-700: var(--accent-action-hover);
    --pte-blue-800: var(--color-blue-700);
    --pte-blue-50: var(--accent-action-subtle);
    --pte-blue-25: var(--accent-action-soft);
    --pte-success-600: var(--accent-success);
    --pte-success-50: var(--bg-success-subtle);
    --pte-success-200: var(--border-success-subtle);
    --pte-danger-600: var(--accent-danger);
    --pte-danger-50: var(--bg-danger-subtle);
    --pte-danger-200: var(--border-danger-subtle);
    --pte-brand-dot: var(--accent-brand);
    --pte-paper-0: var(--bg-page);
    --pte-paper-line: var(--border-default);
}

/* Responsive scaffolding */
/* Desktop default: 1441px+ lives in :root above */

@media (max-width: 1440px) and (min-width: 1025px) {
    :root {
        /* TODO laptop: tighten page padding, nav gap, hero size, section spacing */
        /* --padding-page-x: ...; */
        /* --gap-nav: ...; */
        /* --text-hero-size: ...; */
        /* --padding-hero-top: ...; */
    }
}

@media (max-width: 1024px) and (min-width: 641px) {
    :root {
        /* TODO tablet: reduce page padding, collapse task grid rhythm, scale hero/body typography */
        /* --padding-page-x: ...; */
        /* --gap-task-grid-column: ...; */
        /* --text-hero-size: ...; */
        /* --text-body-large-size: ...; */
    }
}

@media (max-width: 640px) {
    :root {
        /* TODO mobile: redefine shell padding, section spacing, hero sizing, nav density */
        /* --padding-page-x: ...; */
        /* --padding-shell-x: ...; */
        /* --text-hero-size: ...; */
        /* --gap-section: ...; */
    }
}