/* AI-Generated */ /* * MatchCaddy design tokens. * * Two layers: * 1. Primitives (--mc-navy-500, --mc-space-4) - raw values, theme-independent. * 2. Semantics (--mc-surface, --mc-text) - roles, redefined per theme. * * Only semantics are consumed by components, so a theme is a token swap and never * a rule rewrite. Primitives are never referenced outside this file. */ :root { /* ---- Primitives: brand ------------------------------------------------ */ /* Ramp derived from the existing brand navy (#000a34), which sits at 800. */ --mc-navy-50: #eef1f8; --mc-navy-100: #d5dcef; --mc-navy-200: #aab7dd; --mc-navy-300: #7788c2; --mc-navy-400: #4a5c9c; --mc-navy-500: #2c3c76; --mc-navy-600: #1d2a5c; --mc-navy-700: #111d4e; --mc-navy-800: #000a34; --mc-navy-900: #000622; /* Fairway green carries primary actions - it already signals "go" in the existing UI (New Tee Time, Schedule) and reads as sport rather than SaaS. */ --mc-green-50: #e8f6ee; --mc-green-100: #c5e9d5; --mc-green-200: #92d5b1; --mc-green-300: #57bd89; --mc-green-400: #2ea36b; --mc-green-500: #1c8a56; --mc-green-600: #146e45; --mc-green-700: #0f5636; --mc-green-800: #0b4029; --mc-green-900: #072b1b; /* ---- Primitives: neutrals -------------------------------------------- */ /* Blue-tinted so neutrals sit beside the navy without reading as dirty gray. */ --mc-gray-0: #ffffff; --mc-gray-25: #fbfcfe; --mc-gray-50: #f5f7fa; --mc-gray-100: #eceff5; --mc-gray-200: #dee3ec; --mc-gray-300: #c6cddb; --mc-gray-400: #9aa3b7; --mc-gray-500: #6f7994; --mc-gray-600: #515a73; --mc-gray-700: #3b4358; --mc-gray-800: #262c3d; --mc-gray-900: #171b28; --mc-gray-950: #0e1119; /* ---- Primitives: status ---------------------------------------------- */ --mc-amber-100: #fdefd0; --mc-amber-300: #f5c563; --mc-amber-500: #d18b0a; --mc-amber-700: #8f5c00; --mc-red-100: #fce4e4; --mc-red-300: #f19b9b; --mc-red-500: #d13b3b; --mc-red-700: #932020; --mc-sky-100: #ddeefb; --mc-sky-300: #8ec5ee; --mc-sky-500: #2b7fc4; --mc-sky-700: #1a5688; /* ---- Typography ------------------------------------------------------- */ --mc-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mc-font-num: "Inter", ui-monospace, "SF Mono", Menlo, monospace; /* Fluid scale: each step interpolates between a 360px phone and a 1280px desktop, so mid-width tablets get real sizes instead of a rounded-down mobile step. Steps below -base stay fixed - shrinking captions hurts more than it saves. */ --mc-text-2xs: 0.6875rem; --mc-text-xs: 0.75rem; --mc-text-sm: 0.8125rem; --mc-text-base: clamp(0.875rem, 0.845rem + 0.13vw, 0.9375rem); --mc-text-md: clamp(0.9375rem, 0.887rem + 0.22vw, 1.0625rem); --mc-text-lg: clamp(1.0625rem, 0.985rem + 0.35vw, 1.25rem); --mc-text-xl: clamp(1.1875rem, 1.048rem + 0.62vw, 1.5rem); --mc-text-2xl: clamp(1.375rem, 1.148rem + 1.01vw, 1.9375rem); --mc-text-3xl: clamp(1.625rem, 1.234rem + 1.74vw, 2.5rem); --mc-leading-tight: 1.2; --mc-leading-snug: 1.35; --mc-leading-normal: 1.55; --mc-leading-relaxed: 1.7; --mc-weight-normal: 400; --mc-weight-medium: 500; --mc-weight-semibold: 600; --mc-weight-bold: 700; --mc-tracking-tight: -0.015em; --mc-tracking-wide: 0.02em; --mc-tracking-caps: 0.06em; /* ---- Spacing ---------------------------------------------------------- */ /* 4px base. Named by step, not by pixel, so the scale can be retuned once. */ --mc-space-0: 0; --mc-space-1: 0.25rem; --mc-space-2: 0.5rem; --mc-space-3: 0.75rem; --mc-space-4: 1rem; --mc-space-5: 1.25rem; --mc-space-6: 1.5rem; --mc-space-8: 2rem; --mc-space-10: 2.5rem; --mc-space-12: 3rem; --mc-space-16: 4rem; --mc-space-20: 5rem; /* Gutter and section rhythm tighten on phones where every px of width counts. */ --mc-gutter: clamp(0.875rem, 0.6rem + 1.2vw, 1.5rem); --mc-section-gap: clamp(1rem, 0.75rem + 1.1vw, 1.5rem); /* ---- Radii ------------------------------------------------------------ */ --mc-radius-sm: 6px; --mc-radius-md: 10px; --mc-radius-lg: 14px; --mc-radius-xl: 20px; --mc-radius-pill: 999px; /* ---- Touch targets ---------------------------------------------------- */ /* 44px is the iOS HIG minimum; this app ships as an installable PWA, so it is a floor for every interactive element, not a mobile-only concern. */ --mc-touch-min: 44px; --mc-touch-comfortable: 48px; /* ---- Layout ----------------------------------------------------------- */ --mc-container-max: 1180px; --mc-bottom-nav-height: 60px; --mc-topbar-height: 60px; /* Reserve bottom-nav height plus the iOS home indicator inset so fixed nav never covers the last row of content. */ --mc-safe-bottom: env(safe-area-inset-bottom, 0px); /* ---- Motion ----------------------------------------------------------- */ --mc-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --mc-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --mc-duration-fast: 120ms; --mc-duration-base: 200ms; --mc-duration-slow: 320ms; --mc-z-sticky: 100; --mc-z-bottom-nav: 1030; --mc-z-modal: 1055; --mc-z-toast: 1080; } /* ---- Semantics: light (default) ------------------------------------------ */ :root { color-scheme: light; --mc-canvas: var(--mc-gray-50); --mc-surface: var(--mc-gray-0); --mc-surface-raised: var(--mc-gray-0); --mc-surface-sunken: var(--mc-gray-100); --mc-surface-inverse: var(--mc-navy-800); --mc-text: var(--mc-gray-900); --mc-text-muted: var(--mc-gray-600); /* gray-500 measured 4.34:1 on white - just under AA. gray-600 is 6.86:1; this step is 5.30:1 and keeps subtle ink distinct from muted. */ --mc-text-subtle: #626b85; --mc-text-inverse: var(--mc-gray-0); --mc-text-on-accent: var(--mc-gray-0); --mc-border: var(--mc-gray-200); --mc-border-strong: var(--mc-gray-300); --mc-border-subtle: var(--mc-gray-100); /* * The accent is the brand navy, matching the MATCHCADDY wordmark in the * header. It was fairway green, which reads as golf but appears nowhere in * the logo - so the header (red mark + navy wordmark) and the page (green) * were three competing brand colors. * * Navy also lets the red mark stay unique: used once, unrepeated, which * reads as identity rather than clash. Green is not retired, it retreats to * --mc-success, where it means a state rather than decorating a button. * * 19.2:1 against white, both as a button fill under white text and as link * ink on the surface. */ --mc-accent: var(--mc-navy-800); /* A step of the accent that stays clearly separate from body ink, for display type that must read as a different colour rather than just darker. The plain accent is near-black and collapses against text. */ --mc-accent-display: var(--mc-navy-500); --mc-accent-hover: var(--mc-navy-700); --mc-accent-active: var(--mc-navy-900); --mc-accent-soft: var(--mc-navy-50); --mc-accent-soft-text: var(--mc-navy-700); --mc-accent-border: var(--mc-navy-200); --mc-brand: var(--mc-navy-800); --mc-brand-hover: var(--mc-navy-700); --mc-brand-soft: var(--mc-navy-50); --mc-brand-soft-text: var(--mc-navy-700); --mc-info: var(--mc-sky-500); --mc-info-soft: var(--mc-sky-100); --mc-info-soft-text: var(--mc-sky-700); --mc-warning: var(--mc-amber-500); --mc-warning-soft: var(--mc-amber-100); --mc-warning-soft-text: var(--mc-amber-700); --mc-danger: var(--mc-red-500); --mc-danger-soft: var(--mc-red-100); --mc-danger-soft-text: var(--mc-red-700); --mc-success: var(--mc-green-500); --mc-success-soft: var(--mc-green-50); --mc-success-soft-text: var(--mc-green-700); --mc-focus-ring: 0 0 0 3px rgba(0, 10, 52, 0.30); --mc-focus-ring-danger: 0 0 0 3px rgba(209, 59, 59, 0.32); /* Layered shadows: a tight contact shadow plus a diffuse ambient one, so cards read as lifted rather than outlined in gray. */ --mc-shadow-xs: 0 1px 2px rgba(14, 17, 25, 0.06); --mc-shadow-sm: 0 1px 2px rgba(14, 17, 25, 0.06), 0 2px 6px rgba(14, 17, 25, 0.05); --mc-shadow-md: 0 2px 4px rgba(14, 17, 25, 0.06), 0 6px 16px rgba(14, 17, 25, 0.08); --mc-shadow-lg: 0 4px 8px rgba(14, 17, 25, 0.07), 0 16px 32px rgba(14, 17, 25, 0.10); --mc-shadow-nav: 0 -1px 0 var(--mc-border), 0 -8px 24px rgba(14, 17, 25, 0.06); /* ---- Visualization ---------------------------------------------------- * Categorical hues are assigned in FIXED ORDER and never cycled; a 9th * series folds into "Other" rather than generating a hue. Both columns were * checked with the dataviz validator (lightness band, chroma floor, CVD * separation, normal-vision floor, contrast vs surface) against their own * surface - the dark column is its own set of steps, not a flip of light. * * Light carries one CVD warning: slots 5<->4 (cyan/purple) separate by only * 7.8 deutan, which is legal solely because every chart keeps a legend and * direct labels. Do not remove those legends. */ --mc-viz-1: #2b7fc4; /* blue */ --mc-viz-2: #92400e; /* amber */ --mc-viz-3: #1c8a56; /* green */ --mc-viz-4: #9450c9; /* purple */ --mc-viz-5: #0891b2; /* cyan */ --mc-viz-6: #be185d; /* magenta */ --mc-viz-7: #4a5c9c; /* indigo */ /* Diverging pair for score impact. Replaces the old red/green, which is the textbook red-green CVD failure; blue/amber survives every simulation. Sign is always stated in the label too, so polarity is never color-alone. */ --mc-viz-pos: #92400e; /* worse than baseline - strokes added */ --mc-viz-neg: #2b7fc4; /* better than baseline - strokes saved */ --mc-viz-mid: #9aa3b7; /* neutral midpoint */ --mc-viz-grid: rgba(23, 27, 40, 0.10); --mc-viz-axis: rgba(23, 27, 40, 0.28); } /* ---- Semantics: dark ------------------------------------------------------ */ /* * Defined once in a mixin-shaped block and applied to both the media query and * the explicit override, so the two can never drift. The media rule is guarded * against [data-theme="light"] so an explicit light choice wins on a dark OS. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --mc-canvas: var(--mc-gray-950); --mc-surface: var(--mc-gray-900); --mc-surface-raised: var(--mc-gray-800); --mc-surface-sunken: #0a0d14; --mc-surface-inverse: var(--mc-gray-100); --mc-text: #e9ecf3; --mc-text-muted: var(--mc-gray-400); /* gray-500 is 3.95:1 on the dark surface; this step is 5.11:1. */ --mc-text-subtle: #828ca6; --mc-text-inverse: var(--mc-gray-900); /* The dark accent is a light green; white on it is 3.20:1. Dark ink on it is 5.90:1, so the accent button inverts its label in dark mode. */ --mc-text-on-accent: var(--mc-gray-950); --mc-border: #2b3244; --mc-border-strong: #3c455c; --mc-border-subtle: #212736; /* Saturated mid-tones wash out on dark ground; step toward the light end of the ramp to hold the same perceived weight. */ --mc-accent: var(--mc-navy-300); /* On a dark ground the display step must go lighter, not darker. */ --mc-accent-display: var(--mc-navy-200); --mc-accent-hover: var(--mc-navy-200); --mc-accent-active: var(--mc-navy-100); --mc-accent-soft: rgba(119, 136, 194, 0.18); --mc-accent-soft-text: var(--mc-navy-200); --mc-accent-border: rgba(119, 136, 194, 0.38); --mc-brand: var(--mc-gray-800); --mc-brand-hover: var(--mc-gray-700); --mc-brand-soft: rgba(119, 136, 194, 0.16); --mc-brand-soft-text: var(--mc-navy-200); --mc-info: var(--mc-sky-300); --mc-info-soft: rgba(142, 197, 238, 0.16); --mc-info-soft-text: var(--mc-sky-300); --mc-warning: var(--mc-amber-300); --mc-warning-soft: rgba(245, 197, 99, 0.16); --mc-warning-soft-text: var(--mc-amber-300); --mc-danger: var(--mc-red-300); --mc-danger-soft: rgba(241, 155, 155, 0.16); --mc-danger-soft-text: var(--mc-red-300); --mc-success: var(--mc-green-300); --mc-success-soft: rgba(87, 189, 137, 0.16); --mc-success-soft-text: var(--mc-green-200); --mc-focus-ring: 0 0 0 3px rgba(119, 136, 194, 0.45); --mc-focus-ring-danger: 0 0 0 3px rgba(241, 155, 155, 0.4); /* Elevation on dark ground comes from surface lightness, not shadow, so shadows only deepen the separation rather than carry it. */ --mc-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --mc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3); --mc-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.35); --mc-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.45), 0 16px 32px rgba(0, 0, 0, 0.45); --mc-shadow-nav: 0 -1px 0 var(--mc-border), 0 -8px 24px rgba(0, 0, 0, 0.35); /* Same seven hues, re-stepped for the dark surface (#171b28) and re-validated there; all checks pass with no CVD warning. */ --mc-viz-1: #3d8fd4; --mc-viz-2: #c86a10; --mc-viz-3: #2ea36b; --mc-viz-4: #a05fd0; --mc-viz-5: #0ea5c4; --mc-viz-6: #d63a76; --mc-viz-7: #6b7ccc; --mc-viz-pos: #c86a10; --mc-viz-neg: #3d8fd4; --mc-viz-mid: #6f7994; --mc-viz-grid: rgba(233, 236, 243, 0.12); --mc-viz-axis: rgba(233, 236, 243, 0.30); } } :root[data-theme="dark"] { color-scheme: dark; --mc-canvas: var(--mc-gray-950); --mc-surface: var(--mc-gray-900); --mc-surface-raised: var(--mc-gray-800); --mc-surface-sunken: #0a0d14; --mc-surface-inverse: var(--mc-gray-100); --mc-text: #e9ecf3; --mc-text-muted: var(--mc-gray-400); /* gray-500 is 3.95:1 on the dark surface; this step is 5.11:1. */ --mc-text-subtle: #828ca6; --mc-text-inverse: var(--mc-gray-900); /* The dark accent is a light green; white on it is 3.20:1. Dark ink on it is 5.90:1, so the accent button inverts its label in dark mode. */ --mc-text-on-accent: var(--mc-gray-950); --mc-border: #2b3244; --mc-border-strong: #3c455c; --mc-border-subtle: #212736; --mc-accent: var(--mc-navy-300); /* On a dark ground the display step must go lighter, not darker. */ --mc-accent-display: var(--mc-navy-200); --mc-accent-hover: var(--mc-navy-200); --mc-accent-active: var(--mc-navy-100); --mc-accent-soft: rgba(119, 136, 194, 0.18); --mc-accent-soft-text: var(--mc-navy-200); --mc-accent-border: rgba(119, 136, 194, 0.38); --mc-brand: var(--mc-gray-800); --mc-brand-hover: var(--mc-gray-700); --mc-brand-soft: rgba(119, 136, 194, 0.16); --mc-brand-soft-text: var(--mc-navy-200); --mc-info: var(--mc-sky-300); --mc-info-soft: rgba(142, 197, 238, 0.16); --mc-info-soft-text: var(--mc-sky-300); --mc-warning: var(--mc-amber-300); --mc-warning-soft: rgba(245, 197, 99, 0.16); --mc-warning-soft-text: var(--mc-amber-300); --mc-danger: var(--mc-red-300); --mc-danger-soft: rgba(241, 155, 155, 0.16); --mc-danger-soft-text: var(--mc-red-300); --mc-success: var(--mc-green-300); --mc-success-soft: rgba(87, 189, 137, 0.16); --mc-success-soft-text: var(--mc-green-200); --mc-focus-ring: 0 0 0 3px rgba(119, 136, 194, 0.45); --mc-focus-ring-danger: 0 0 0 3px rgba(241, 155, 155, 0.4); --mc-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --mc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3); --mc-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.35); --mc-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.45), 0 16px 32px rgba(0, 0, 0, 0.45); --mc-shadow-nav: 0 -1px 0 var(--mc-border), 0 -8px 24px rgba(0, 0, 0, 0.35); /* Same seven hues, re-stepped for the dark surface (#171b28) and re-validated there; all checks pass with no CVD warning. */ --mc-viz-1: #3d8fd4; --mc-viz-2: #c86a10; --mc-viz-3: #2ea36b; --mc-viz-4: #a05fd0; --mc-viz-5: #0ea5c4; --mc-viz-6: #d63a76; --mc-viz-7: #6b7ccc; --mc-viz-pos: #c86a10; --mc-viz-neg: #3d8fd4; --mc-viz-mid: #6f7994; --mc-viz-grid: rgba(233, 236, 243, 0.12); --mc-viz-axis: rgba(233, 236, 243, 0.30); } /* End AI-Generated */