/* =============================================================
   Mentor 曼都 Design System — Tokens
   60th Anniversary | "Beauty Is Our Promise"
   ============================================================= */

/* ---------- Webfonts (Google Fonts substitutions) -----------
   Display EN:  Cormorant Garamond  (substitute for the elegant
                serif used in TIME CREATES LEGACY / MENTOR)
   Heading ZH:  Noto Sans TC        (substitute for 思源黑體)
   Body ZH/EN:  Noto Sans TC + Inter (clean, neutral)
   --------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Noto+Sans+TC:wght@300;400;500;700;900&family=Noto+Serif+TC:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap");

:root {
    /* ----- BRAND COLORS ----- */

    /* Anniversary primary — used by the 60th mark + key visuals */
    --mentor-teal-900: #08434a;
    --mentor-teal-700: #0c6a76;
    --mentor-teal-600: #0f8c9a; /* primary brand teal */
    --mentor-teal-500: #1aa8b6;
    --mentor-teal-300: #6fcad2;
    --mentor-teal-100: #c7eaee;
    --mentor-teal-050: #e9f6f7;

    /* Heritage logo marks (the face-and-petals logotype) */
    --mentor-logo-blue: #1ba8e1;
    --mentor-logo-purple: #9a7ec0;

    /* Champagne / professional gold (per brief) */
    --mentor-gold-700: #a3853c;
    --mentor-gold-500: #c9a85a; /* champagne gold accent */
    --mentor-gold-300: #e3cf94;
    --mentor-gold-100: #f4ebd2;

    /* Auxiliary palette — POWER (oat/sand) + FLOW (lavender) */
    --mentor-oat-700: #806746;
    --mentor-oat-500: #d8be8c; /* warm beige hero */
    --mentor-oat-300: #ebd9b6;
    --mentor-oat-100: #f5f0e4; /* page background */
    --mentor-oat-050: #faf6ee;

    --mentor-lavender-700: #5a4d8c;
    --mentor-lavender-500: #9b8bcc; /* flow / softness */
    --mentor-lavender-300: #c4b8e3;
    --mentor-lavender-100: #ede8f7;

    --mentor-sky-500: #7fc6e0; /* soft companion blue */
    --mentor-sky-100: #e0f1f8;

    /* Neutrals (carbon / paper) */
    --ink-000: #000000;
    --ink-900: #18181b; /* deep carbon — headings */
    --ink-800: #2a2a2d;
    --ink-700: #43434a;
    --ink-600: #6b6b73;
    --ink-500: #8e8e96;
    --ink-400: #b6b6bc;
    --ink-300: #d4d4d8;
    --ink-200: #e6e6ea;
    --ink-100: #f1f1f3;
    --paper:   #fbfaf6; /* warm white (oat-tinted) */
    --paper-pure: #ffffff;

    /* Semantic surfaces */
    --surface-page: var(--paper);
    --surface-soft: var(--mentor-oat-100);
    --surface-card: var(--paper-pure);
    --surface-ink:  var(--ink-900);
    --surface-teal: var(--mentor-teal-050);

    /* Semantic foregrounds */
    --fg-1: var(--ink-900);   /* primary text */
    --fg-2: var(--ink-700);   /* secondary text */
    --fg-3: var(--ink-500);   /* tertiary / meta */
    --fg-onDark: #fbfaf6;
    --fg-onTeal: #ffffff;
    --fg-link: var(--mentor-teal-700);

    /* Borders */
    --border-hair: rgba(24,24,27,0.08);
    --border-soft: rgba(24,24,27,0.12);
    --border-strong: rgba(24,24,27,0.22);

    /* Semantic states */
    --success: #2f7a52;
    --warning: #c98a1b;
    --danger:  #b5402b;

    /* ----- TYPOGRAPHY ----- */
    --font-display: "Cormorant Garamond", "Noto Serif TC", Georgia, serif;
    --font-sans-tc: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
    --font-sans-en: "Inter", "Helvetica Neue", Arial, sans-serif;
    --font-serif-tc: "Noto Serif TC", "Songti TC", serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* fluid type scale */
    --fs-12: 0.75rem;
    --fs-14: 0.875rem;
    --fs-16: 1rem;
    --fs-18: 1.125rem;
    --fs-20: 1.25rem;
    --fs-24: 1.5rem;
    --fs-32: 2rem;
    --fs-40: 2.5rem;
    --fs-56: 3.5rem;
    --fs-72: 4.5rem;
    --fs-96: 6rem;

    --lh-tight: 1.1;     /* @kind other */
    --lh-snug: 1.25;     /* @kind other */
    --lh-normal: 1.5;    /* @kind other */
    --lh-loose: 1.75;    /* @kind other */

    --tracking-tight: -0.02em;   /* @kind spacing */
    --tracking-normal: 0;        /* @kind spacing */
    --tracking-wide: 0.04em;     /* @kind spacing */
    --tracking-display: 0.08em;  /* @kind spacing */ /* TIME CREATES LEGACY style */
    --tracking-eyebrow: 0.22em;  /* @kind spacing */ /* small caps eyebrow */

    /* ----- SPACING ----- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* ----- RADII ----- */
    --radius-sm: 4px;
    --radius-md: 8px;     /* default — buttons, inputs */
    --radius-lg: 12px;    /* cards (per brief: 8–12px) */
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* ----- SHADOWS / ELEVATION ----- */
    --shadow-1: 0 1px 2px rgba(24,24,27,0.04), 0 1px 1px rgba(24,24,27,0.03);
    --shadow-2: 0 4px 12px rgba(24,24,27,0.06), 0 1px 2px rgba(24,24,27,0.04);
    --shadow-3: 0 12px 32px rgba(24,24,27,0.10), 0 2px 4px rgba(24,24,27,0.04);
    --shadow-4: 0 24px 60px rgba(8,67,74,0.14), 0 4px 12px rgba(24,24,27,0.06);
    --shadow-inset: inset 0 0 0 1px rgba(24,24,27,0.06);
    --shadow-teal: 0 12px 36px rgba(15,140,154,0.22);
    --shadow-gold: 0 12px 36px rgba(201,168,90,0.22);

    /* ----- MOTION ----- */
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);     /* @kind other */
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);      /* @kind other */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* @kind other */
    --t-fast: 140ms;   /* @kind other */
    --t-base: 240ms;   /* @kind other */
    --t-slow: 480ms;   /* @kind other */

    /* ----- GRADIENTS / TEXTURES ----- */
    --grad-water: linear-gradient(135deg, #cbe9ee 0%, #5fb8c7 45%, #0f8c9a 100%);   /* @kind color */
    --grad-power: linear-gradient(180deg, #f5ecd4 0%, #d8be8c 80%);                  /* @kind color */
    --grad-flow:  linear-gradient(135deg, #ede8f7 0%, #9b8bcc 90%);                  /* @kind color */
    --grad-paper: linear-gradient(180deg, #fbfaf6 0%, #f5f0e4 100%);                 /* @kind color */
    --grad-ink:   linear-gradient(180deg, #2a2a2d 0%, #18181b 100%);                 /* @kind color */
}

/* =============================================================
   Semantic type roles — pair name + class
   ============================================================= */

.h-display,
.t-display {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(3rem, 7vw, var(--fs-96));
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-display);
    color: var(--fg-1);
}

.h1 {
    font-family: var(--font-sans-tc);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, var(--fs-56));
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--fg-1);
}

.h2 {
    font-family: var(--font-sans-tc);
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, var(--fs-40));
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--fg-1);
}

.h3 {
    font-family: var(--font-sans-tc);
    font-weight: 500;
    font-size: var(--fs-24);
    line-height: var(--lh-snug);
    color: var(--fg-1);
}

.eyebrow {
    font-family: var(--font-sans-en);
    font-weight: 500;
    font-size: var(--fs-12);
    line-height: 1;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--mentor-teal-700);
}

.body,
p {
    font-family: var(--font-sans-tc);
    font-weight: 400;
    font-size: var(--fs-16);
    line-height: var(--lh-loose);
    color: var(--fg-2);
}

.body-lg {
    font-size: var(--fs-18);
    line-height: var(--lh-loose);
}

.body-sm {
    font-size: var(--fs-14);
    line-height: var(--lh-normal);
}

.caption,
.meta {
    font-family: var(--font-sans-en);
    font-size: var(--fs-12);
    line-height: var(--lh-normal);
    letter-spacing: var(--tracking-wide);
    color: var(--fg-3);
}

.quote-zh {
    font-family: var(--font-serif-tc);
    font-weight: 400;
    font-size: var(--fs-20);
    line-height: var(--lh-loose);
    letter-spacing: 0.06em;
    color: var(--fg-1);
}

code,
.mono {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* link */
a {
    color: var(--fg-link);
    text-decoration: none;
    text-underline-offset: 3px;
    transition: color var(--t-fast) var(--ease-out);
}
a:hover { color: var(--mentor-teal-600); text-decoration: underline; }

/* Default page base */
html, body {
    background: var(--surface-page);
    color: var(--fg-1);
    font-family: var(--font-sans-tc);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}