/* ───────────────────────────────────────────────────────────── anTee-Up Design System — Colors & Type tokens Two surfaces share the brand but use distinct palettes: • App (light, on-course) — dark forest green + orange accent • Web (dark, premium) — deep forest + champagne gold ───────────────────────────────────────────────────────────── */ @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,800;0,900;1,700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Open+Sans:wght@400;600;700&display=swap"); :root { /* ─── App palette (Flutter / mobile) ─────────────────────── */ /* Brand */ --app-primary: #1B4D3E; /* dark forest green — buttons, headers */ --app-primary-container: #2D6A5A; --app-primary-deep: #1B3A2D; /* round/scoring screens header */ --app-on-primary: #FFFFFF; --app-accent: #E67E22; /* orange — logo, tee, highlights */ --app-on-accent: #FFFFFF; --app-secondary: #27AE60; /* live-leaderboard green, CTAs */ --app-secondary-container:#2ECC71; --app-secondary-deep: #2D6A4F; /* "win" / accent-strong */ --app-on-secondary: #FFFFFF; /* Status */ --app-success: #27AE60; --app-win: #2D6A4F; --app-loss: #C0392B; --app-error: #E74C3C; --app-error-container: #FDEDEC; --app-on-error-container:#C0392B; --app-gold: #D4A94B; --app-silver: #9AADBD; --app-bronze: #C08B5C; --app-group-trip: #1E5F8A; --app-group-trip-light: #D6E8F5; /* Surfaces */ --app-bg: #F6F5F0; /* warm putting-green off-white */ --app-bg-cool: #FAFAF7; /* alt warm bg used in scoring */ --app-surface: #FFFFFF; --app-surface-highest: #F5F5F5; --app-accent-light: #D8F3DC; /* mint highlight band */ --app-section-pill: #EBF5F0; /* "your row" highlight */ --app-warning-tint: #FFF8F0; --app-warning-border: #FCE8D0; /* Text */ --app-fg: #1A1A1A; --app-fg-2: #5C5C5C; /* secondary text */ --app-fg-3: #78858F; /* neutral / muted meta */ --app-section-label: #5A6B5E; --app-disabled: #95A5A6; /* Lines */ --app-outline: #DDDDDD; --app-outline-variant: #EEEEEE; --app-divider: #E8E4DD; /* Elevation (light) */ --app-shadow-1: 0 4px 12px rgba(0,0,0,0.04), 0 1px 4px rgba(0,0,0,0.02); --app-shadow-2: 0 12px 32px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04); /* ─── Web palette (marketing) ────────────────────────────── */ --web-green-darkest: #091910; --web-green-dark: #0E2219; --web-green-primary: #1B3A2D; --web-green-mid: #244D3C; --web-green-light: #2E6449; --web-gold: #C9A84C; /* champagne */ --web-gold-light: #E2C47A; --web-gold-dark: #A8862A; --web-text-primary: #F0EBE0; /* warm parchment */ --web-text-secondary: #9DB5A8; --web-text-muted: #4E6A5C; --web-card-bg: rgba(255,255,255,0.03); --web-card-border: rgba(201,168,76,0.14); --web-divider: rgba(201,168,76,0.12); /* ─── Spacing / radii ────────────────────────────────────── */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-pill: 999px; --page-px: 20px; --section-gap: 28px; --inner-gap: 14px; --button-h: 48px; --input-h: 56px; --bottom-nav-h: 80px; /* ─── Type families ──────────────────────────────────────── */ --font-display: "Playfair Display", Georgia, "Times New Roman", serif; --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --font-app: "Open Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif; --font-system: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; } /* ─── Semantic type — APP (Open Sans / Material 3) ─────────── Used inside the Flutter mobile UI. Generous line-heights, 14px base, never below 12px. */ :root { --app-h1: 700 28px/1.2 var(--font-app); /* screen titles ("Welcome to anTee-Up") */ --app-h2: 700 22px/1.25 var(--font-app); /* AppBar titles */ --app-h3: 700 18px/1.3 var(--font-app); /* section headings ("Active Rounds") */ --app-h4: 700 16px/1.35 var(--font-app); /* card titles ("FPG São Paulo Golf Center") */ --app-body: 400 14px/1.5 var(--font-app); --app-body-strong: 700 14px/1.5 var(--font-app); --app-small: 400 12px/1.45 var(--font-app); /* metadata, helper */ --app-small-strong: 700 12px/1.45 var(--font-app); --app-button: 700 16px/1 var(--font-app); --app-tab: 700 12px/1 var(--font-app); --app-score: 700 24px/1 var(--font-app); /* big stroke totals */ } /* ─── Semantic type — WEB (Playfair + DM Sans) ─────────────── Editorial display with airy sans body. */ :root { --web-eyebrow: 600 11px/1 var(--font-body); --web-h1: 900 clamp(56px, 9vw, 104px)/0.95 var(--font-display); --web-h2: 700 clamp(34px, 5vw, 56px)/1.08 var(--font-display); --web-h3: 700 20px/1.3 var(--font-display); --web-feature-title: 700 19px/1.3 var(--font-display); --web-body-lg: 300 18px/1.7 var(--font-body); --web-body: 300 16px/1.7 var(--font-body); --web-body-sm: 300 14px/1.7 var(--font-body); --web-caption: 500 13px/1.4 var(--font-body); --web-tag: 500 12px/1 var(--font-body); --web-button: 600 13px/1 var(--font-body); } /* ─── Quick utility classes ────────────────────────────────── Use these on .app or .web scoped containers when prototyping. For production, the CSS vars themselves are the contract. */ .app, .app-scope { background: var(--app-bg); color: var(--app-fg); font-family: var(--font-app); } .web, .web-scope { background: var(--web-green-darkest); color: var(--web-text-primary); font-family: var(--font-body); } .app h1, .app .h1 { font: var(--app-h1); color: var(--app-fg); letter-spacing: -0.2px; } .app h2, .app .h2 { font: var(--app-h2); color: var(--app-fg); } .app h3, .app .h3 { font: var(--app-h3); color: var(--app-fg); } .app h4, .app .h4 { font: var(--app-h4); color: var(--app-fg); } .app p, .app .body { font: var(--app-body); color: var(--app-fg); } .app .meta { font: var(--app-small); color: var(--app-fg-2); } .web h1, .web .h1 { font: var(--web-h1); color: var(--web-text-primary); letter-spacing: -3px; } .web h1 .accent { color: var(--web-gold); font-style: italic; } .web h2, .web .h2 { font: var(--web-h2); color: var(--web-text-primary); letter-spacing: -1.5px; } .web h3, .web .h3 { font: var(--web-h3); color: var(--web-text-primary); } .web .eyebrow { font: var(--web-eyebrow); letter-spacing: 3.5px; text-transform: uppercase; color: var(--web-gold); } .web p, .web .body { font: var(--web-body); color: var(--web-text-secondary); } /* Convenience aliases (non-scoped, default = app) */ :root { --fg: var(--app-fg); --fg-2: var(--app-fg-2); --bg: var(--app-bg); --surface: var(--app-surface); --brand: var(--app-primary); --accent: var(--app-accent); --success: var(--app-secondary); --error: var(--app-error); }