/*
================================================

Space Vanta Theme 1.0

Module:
Base / Global Foundation

Version:
1.2 Final Test

Purpose:
- Global design tokens
- Global typography foundation
- Global color foundation
- Global layout/reset foundation
- Form control inheritance
- Media normalization
- Accessibility foundation
- Lightweight typography utilities

IMPORTANT:
This file is a foundation layer.

It MUST NOT:
- Override dedicated component typography
- Override dedicated component colors
- Override dedicated component spacing
- Override dedicated component materials
- Override dedicated component animations
- Redesign existing modules
- Contain component-specific visual rules

Dedicated module CSS always has priority over
the foundation tokens defined here.

================================================
*/


/* =================================================
   01. DESIGN TOKENS
================================================= */

:root {

    /* ---------------------------------------------
     Brand Environment
     Warm Neutral Environment
  --------------------------------------------- */

    --sv-bg: #F3F1EB;

    --sv-surface: #FFFFFF;
    --sv-surface-soft: #F8F7F3;
    --sv-surface-cool: #EEF1F1;


    /* ---------------------------------------------
     Brand Text
     Graphite / Neutral Structure
  --------------------------------------------- */

    --sv-text: #181A1C;
    --sv-text-secondary: #555B60;
    --sv-muted: #7A8084;
    --sv-subtle: #989DA0;


    /* ---------------------------------------------
     Borders
     Metallic / Structural Neutral
  --------------------------------------------- */

    --sv-border: rgba(24, 26, 28, 0.12);
    --sv-border-strong: rgba(24, 26, 28, 0.19);


    /* ---------------------------------------------
     Spatial Accent
     Cold Steel Blue

     Used as:
     - interaction signal
     - focus signal
     - reflection
     - spatial accent

     NOT intended as:
     - dominant page background
     - universal text color
     - universal CTA color
  --------------------------------------------- */

    --sv-accent: #718BA3;

    --sv-accent-soft: rgba(113, 139, 163, 0.16);
    --sv-accent-faint: rgba(113, 139, 163, 0.08);
    --sv-focus: rgba(113, 139, 163, 0.42);


    /* ---------------------------------------------
     Metallic Structure
  --------------------------------------------- */

    --sv-silver: #B8BCBE;
    --sv-silver-soft: #D9DCDB;
    --sv-cool-gray: #AEB5B9;


    /* ---------------------------------------------
     Typography
     
     Deliberately kept as a font stack rather than
     forcing a single font onto every component.
  --------------------------------------------- */

    --sv-font-sans:
        "Helvetica Neue",
        Helvetica,
        Arial,
        "PingFang TC",
        "Noto Sans TC",
        "Microsoft JhengHei",
        sans-serif;


    /* ---------------------------------------------
     Font Weights
  --------------------------------------------- */

    --sv-weight-regular: 400;
    --sv-weight-medium: 500;
    --sv-weight-semibold: 600;


    /* ---------------------------------------------
     Line Heights
  --------------------------------------------- */

    --sv-leading-body: 1.5;
    --sv-leading-tight: 1.15;
    --sv-leading-display: 1.02;


    /* ---------------------------------------------
     Letter Spacing
  --------------------------------------------- */

    --sv-tracking-body: 0;
    --sv-tracking-label: 0.12em;
    --sv-tracking-wide: 0.18em;


    /* ---------------------------------------------
     Global Layout Padding
     
     Components may intentionally use their own
     spacing values.
  --------------------------------------------- */

    --sv-desktop-padding: 40px;
    --sv-mobile-padding: 20px;
}


/* =================================================
   02. GLOBAL BOX MODEL
================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* =================================================
   03. DOCUMENT FOUNDATION
================================================= */

html {
    margin: 0;
    padding: 0;

    background: var(--sv-bg);

    font-family: var(--sv-font-sans);
    color: var(--sv-text);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;
}


body {
    margin: 0;
    padding: 0;

    background: var(--sv-bg);
    color: var(--sv-text);

    font-family: var(--sv-font-sans);
    font-size: 16px;
    line-height: var(--sv-leading-body);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* =================================================
   04. FORM TYPOGRAPHY
     
   Only inheritance is defined here.
   Visual styling remains component-controlled.
================================================= */

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}


/* =================================================
   05. LINKS
     
   Base behavior only.
   Dedicated modules may define their own color,
   underline, hover, transition, etc.
================================================= */

a {
    color: inherit;
    text-decoration: none;
}


/* =================================================
   06. LIST RESET
================================================= */

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}


/* =================================================
   07. MEDIA NORMALIZATION
     
   No dimensions are imposed.
   Components remain responsible for their own
   aspect ratio / object-fit / layout behavior.
================================================= */

img,
svg,
video {
    max-width: 100%;
}


img {
    vertical-align: middle;
}


/* =================================================
   08. BUTTON FOUNDATION
     
   Only removes browser-default appearance.

   IMPORTANT:
   No background
   No border
   No padding
   No radius
   No font-size
   No color
   No transition

   This prevents interference with dedicated
   button/component CSS.
================================================= */

button {
    margin: 0;
    padding: 0;

    border: 0;
    background: none;

    appearance: none;
    -webkit-appearance: none;

    cursor: pointer;
}


/* =================================================
   09. TEXTAREA / INPUT FOUNDATION
     
   Only remove browser-specific surprises that can
   otherwise create inconsistent sizing.

   No component visual styling is introduced.
================================================= */

textarea {
    resize: vertical;
}


/* =================================================
   10. ACCESSIBILITY / FOCUS
     
   Provides a consistent keyboard focus signal
   without imposing a visual treatment on normal
   component states.
================================================= */

:focus-visible {
    outline: 2px solid var(--sv-focus);
    outline-offset: 3px;
}


/* =================================================
   11. TEXT SELECTION
     
   Uses the spatial accent only as a subtle system
   interaction signal.
================================================= */

::selection {
    background: var(--sv-accent-soft);
    color: var(--sv-text);
}


/* =================================================
   12. GLOBAL TYPOGRAPHY UTILITIES
     
   These are optional utility classes.

   They do NOT affect existing components unless
   explicitly added to their markup.
================================================= */


/* ---------------------------------------------
   Label / Eyebrow
--------------------------------------------- */

.sv-type-label {
    font-family: var(--sv-font-sans);
    font-size: 12px;
    font-weight: var(--sv-weight-medium);
    line-height: 1.2;
    letter-spacing: var(--sv-tracking-label);
    text-transform: uppercase;
}


/* ---------------------------------------------
   Body
--------------------------------------------- */

.sv-type-body {
    font-family: var(--sv-font-sans);
    font-size: 16px;
    font-weight: var(--sv-weight-regular);
    line-height: var(--sv-leading-body);
    letter-spacing: var(--sv-tracking-body);
}


/* ---------------------------------------------
   Meta
--------------------------------------------- */

.sv-type-meta {
    font-family: var(--sv-font-sans);
    font-size: 13px;
    font-weight: var(--sv-weight-regular);
    line-height: 1.4;
    letter-spacing: 0.02em;
}


/* =================================================
   13. REDUCED MOTION
     
   Only modifies document-level smooth scrolling
   and respects user accessibility preferences.

   Component-specific animations remain controlled
   by their own CSS.
================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

}


/* =================================================
   END OF SPACE VANTA BASE
================================================= */