/* ========================================================================== Greece Trips — Design Tokens v1.0 (Phase 1 deliverable) Single source of truth for the brand. The WordPress theme (Phase 4) consumes this file directly; prototypes (Phase 3) import it as-is. Rules: - Never hardcode a color/size that exists here. Add a token instead. - Text/background pairings marked AA below are WCAG-verified (scripted check, 2026-07-07). Don't invent new text pairings without re-running the check. ========================================================================== */ /* --- Self-hosted fonts (never rely on fonts.googleapis.com at runtime: client-side network filters silently block it — see wp.md §3) ------- */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/BricolageGrotesque-var-latin.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/Inter-var-latin.woff2') format('woff2'); } :root { /* ========== COLOR PRIMITIVES ========== */ /* Aegean — the brand blue. Deep open-water ink, not "web blue". */ --gt-aegean-950: #071F2C; --gt-aegean-900: #0B2E40; /* THE ink. Headings, dark surfaces, logo. */ --gt-aegean-800: #103D56; --gt-aegean-700: #155273; --gt-aegean-600: #1A6488; /* links, primary buttons — AA on white */ --gt-aegean-300: #7FB3CC; --gt-aegean-100: #D7E6EE; --gt-aegean-050: #ECF4F8; /* Shallows — harbor-water cyan. Accent, never body text on light. */ --gt-shallows-700: #17727E; /* text-safe cyan — AA on white */ --gt-shallows-500: #2493A2; /* decorative / large text on ink (3:1) */ --gt-shallows-300: #7CC3CC; --gt-shallows-100: #DDF0F2; /* Noon sun — gold. Highlights, ratings, the logo sun. Never text on light. */ --gt-sun-600: #D98F1F; --gt-sun-500: #EFA93F; /* ink text on this = AA (secondary button) */ --gt-sun-300: #F6CE8A; --gt-sun-100: #FCF0DA; /* Rooftile — terracotta. Warm accent, badges, small doses only. */ --gt-terra-700: #9E5231; /* white text on this = AA */ --gt-terra-500: #C4714B; --gt-terra-300: #DCA98F; --gt-terra-100: #F4E3D9; /* Neutrals — cool, sea-washed. */ --gt-white: #FFFFFF; --gt-foam: #F5F9F8; /* default page background */ --gt-mist: #EEF3F4; /* subtle panels, alternating sections */ --gt-line: #DCE5E8; /* borders, dividers */ --gt-gray-400: #9FB0BA; /* disabled, placeholders (decorative only) */ --gt-gray-600: #5A7080; /* muted text — AA on white */ --gt-gray-800: #2E4552; /* body text — AA on white/foam */ /* Semantic */ --gt-success: #2F7D4E; /* white text on this = AA */ --gt-success-bg: #E4F2E9; --gt-warning: #8F5B12; /* AA as text on white */ --gt-warning-bg: #FBF0DA; --gt-error: #C2402A; /* white text on this = AA */ --gt-error-bg: #FAE6E1; --gt-info: var(--gt-aegean-600); --gt-info-bg: #E3EFF5; /* ========== SEMANTIC ALIASES (use these in components) ========== */ --gt-color-bg: var(--gt-foam); --gt-color-bg-subtle: var(--gt-mist); --gt-color-surface: var(--gt-white); --gt-color-surface-dark:var(--gt-aegean-900); --gt-color-heading: var(--gt-aegean-900); --gt-color-text: var(--gt-gray-800); --gt-color-text-muted: var(--gt-gray-600); --gt-color-text-invert: var(--gt-foam); --gt-color-link: var(--gt-aegean-600); --gt-color-link-hover: var(--gt-aegean-800); --gt-color-accent: var(--gt-shallows-500); --gt-color-highlight: var(--gt-sun-500); --gt-color-border: var(--gt-line); --gt-color-focus: var(--gt-shallows-700); /* ========== TYPOGRAPHY ========== */ --gt-font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; --gt-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; /* Scale (major third-ish; display sizes are fluid) */ --gt-text-xs: 0.75rem; /* 12px — captions, labels */ --gt-text-sm: 0.875rem; /* 14px — secondary text, UI */ --gt-text-base: 1.0625rem; /* 17px — body */ --gt-text-lg: 1.1875rem; /* 19px — lead paragraphs */ --gt-text-xl: 1.5rem; /* h4 */ --gt-text-2xl: clamp(1.625rem, 1.35rem + 1.1vw, 2rem); /* h3 */ --gt-text-3xl: clamp(2rem, 1.55rem + 1.8vw, 2.75rem); /* h2 */ --gt-text-4xl: clamp(2.5rem, 1.9rem + 2.8vw, 3.75rem); /* h1 / display */ --gt-weight-regular: 400; --gt-weight-medium: 500; --gt-weight-semibold:600; --gt-weight-bold: 700; --gt-leading-tight: 1.12; /* display headings */ --gt-leading-snug: 1.3; /* subheads, cards */ --gt-leading-base: 1.65; /* body */ --gt-tracking-display: -0.015em; --gt-tracking-caps: 0.12em; /* uppercase labels/eyebrows */ /* ========== SPACING (4px base) ========== */ --gt-space-1: 0.25rem; /* 4 */ --gt-space-2: 0.5rem; /* 8 */ --gt-space-3: 0.75rem; /* 12 */ --gt-space-4: 1rem; /* 16 */ --gt-space-5: 1.5rem; /* 24 */ --gt-space-6: 2rem; /* 32 */ --gt-space-7: 3rem; /* 48 */ --gt-space-8: 4rem; /* 64 */ --gt-space-9: 6rem; /* 96 */ --gt-space-10: 8rem; /* 128 */ /* ========== SHAPE ========== */ --gt-radius-sm: 6px; /* inputs, chips */ --gt-radius-md: 10px; /* buttons, small cards */ --gt-radius-lg: 16px; /* cards, panels */ --gt-radius-xl: 24px; /* hero media, feature panels */ --gt-radius-pill: 999px; /* badges, filter pills */ /* Shadows — ink-tinted, soft (Cycladic light, not gray smog) */ --gt-shadow-sm: 0 1px 2px rgba(11,46,64,.06), 0 1px 3px rgba(11,46,64,.08); --gt-shadow-md: 0 2px 4px rgba(11,46,64,.05), 0 6px 16px rgba(11,46,64,.09); --gt-shadow-lg: 0 4px 8px rgba(11,46,64,.06), 0 16px 40px rgba(11,46,64,.14); --gt-border: 1px solid var(--gt-color-border); /* ========== LAYOUT ========== */ --gt-container: 1160px; --gt-container-prose: 46rem; /* ~72ch article measure */ --gt-gutter: clamp(1rem, 4vw, 2rem); /* ========== MOTION ========== */ --gt-ease: cubic-bezier(.33,.72,.3,1); --gt-dur-fast: 150ms; --gt-dur-base: 250ms; /* ========== SIGNATURE: the route ========== Dotted route line — the brand's connective tissue (itinerary steps, breadcrumb motifs, section connectors). Draw with border-image or SVG; these tokens keep every route line consistent. */ --gt-route-dot-size: 3px; --gt-route-gap: 7px; --gt-route-color: var(--gt-aegean-900); --gt-route-color-invert: var(--gt-foam); } /* Reduced motion: honor it globally, always. */ @media (prefers-reduced-motion: reduce) { :root { --gt-dur-fast: 1ms; --gt-dur-base: 1ms; } }