/* * GINI brand stylesheet · v1.7 * Source: https://gini.iq/brand.css * Manifest: https://gini.iq/brand.json * * Drop-in CSS variables for the GINI brand identity. Adopt * by importing once at the top of your global stylesheet: * * @import url("https://gini.iq/brand.css"); * * Both raw `--gini-*` variables and shadcn/Tailwind-style * aliases (`--primary`, `--background`, …) are exposed. * * Pair with the component stylesheet for every skeu-* class: * * (64 copy-ready specimens: https://gini.iq/brand#components) */ :root { /* ── Palette (raw) ───────────────────────────────────── */ --gini-orange: #F05D25; --gini-orange-rgb: 240 93 37; --gini-ember: #D94E1A; --gini-ember-rgb: 217 78 26; --gini-ink: #1A1A1A; --gini-ink-rgb: 26 26 26; --gini-cream: #FBF6F0; --gini-cream-rgb: 251 246 240; --gini-sand: #EFE6DB; --gini-sand-rgb: 239 230 219; /* ── Aliases (shadcn / Tailwind / generic) ───────────── */ --primary: var(--gini-orange); --primary-foreground: #ffffff; --background: var(--gini-cream); --foreground: var(--gini-ink); --card: #ffffff; --card-foreground: var(--gini-ink); --muted: var(--gini-sand); --muted-foreground: color-mix(in oklab, var(--gini-ink) 60%, transparent); --accent: var(--gini-orange); --accent-foreground: #ffffff; --border: color-mix(in oklab, var(--gini-ink) 12%, transparent); --ring: var(--gini-orange); /* ── Typography ─────────────────────────────────────── */ --gini-font-sans: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif; --gini-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace; --gini-text-display-size: clamp(32–48px, calc(32–48px + 0.5vw), 48px); --gini-text-display-weight: 800; --gini-text-heading-size: clamp(36–48px, calc(36–48px + 0.5vw), 48px); --gini-text-heading-weight: 700; --gini-text-subheading-size: clamp(20–24px, calc(20–24px + 0.5vw), 24px); --gini-text-subheading-weight: 600; --gini-text-body-size: clamp(16–18px, calc(16–18px + 0.5vw), 18px); --gini-text-body-weight: 400; --gini-text-caption-size: clamp(12–14px, calc(12–14px + 0.5vw), 14px); --gini-text-caption-weight: 600; /* ── Geometry ───────────────────────────────────────── */ --gini-radius: 0.75rem; --gini-radius-sm: 0.5rem; --gini-radius-lg: 1rem; --gini-radius-xl: 1.5rem; --gini-radius-2xl: 2rem; --radius: var(--gini-radius); /* ── Shadows ────────────────────────────────────────── */ --gini-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --gini-shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.08); --gini-shadow-lg: 0 20px 40px -12px rgb(0 0 0 / 0.18); --gini-glow-primary: 0 16px 36px rgb(240 93 37 / 0.18); /* ── Design system · modern skeuomorphism (Precision Instrument v1.0.0) ── */ /* Materials */ --skeu-bg: oklch(0.962 0.012 72); --skeu-bg-deep: oklch(0.945 0.014 70); --skeu-surface: oklch(0.993 0.004 80); --skeu-surface-top: #ffffff; --skeu-surface-recessed: oklch(0.928 0.014 70); --skeu-well: oklch(0.955 0.01 72); --skeu-well-deep: oklch(0.935 0.012 70); --skeu-accent: #f05d25; --skeu-accent-light: #ff8a5c; --skeu-accent-deep: #c9481a; --skeu-accent-shadow: #8f3210; --skeu-highlight: rgba(255, 255, 255, 0.92); --skeu-highlight-soft: rgba(255, 255, 255, 0.55); --skeu-edge: oklch(0.86 0.018 68); --skeu-edge-strong: oklch(0.8 0.02 66); --skeu-ink: 37, 22, 10; --skeu-success: #16a34a; --skeu-warning: #d97706; --skeu-error: #dc2626; --skeu-info: #2563eb; /* Elevation stacks — one light source, upper-left */ --skeu-shadow-flush: 0 0 0 1px var(--skeu-edge); --skeu-shadow-raised-1: inset 0 1px 0 var(--skeu-highlight), 0 1px 1px rgba(var(--skeu-ink), 0.06), 0 2px 4px -1px rgba(var(--skeu-ink), 0.08), 0 10px 24px -14px rgba(var(--skeu-ink), 0.2); --skeu-shadow-raised-2: inset 0 1px 0 var(--skeu-highlight), 0 1px 2px rgba(var(--skeu-ink), 0.08), 0 6px 12px -4px rgba(var(--skeu-ink), 0.12), 0 22px 44px -20px rgba(var(--skeu-ink), 0.28); --skeu-shadow-floating: inset 0 1px 0 var(--skeu-highlight), 0 1px 2px rgba(var(--skeu-ink), 0.1), 0 10px 20px -8px rgba(var(--skeu-ink), 0.18), 0 28px 56px -18px rgba(var(--skeu-ink), 0.32); --skeu-shadow-overlay: inset 0 1px 0 var(--skeu-highlight), 0 2px 4px rgba(var(--skeu-ink), 0.12), 0 16px 32px -10px rgba(var(--skeu-ink), 0.28), 0 48px 96px -24px rgba(var(--skeu-ink), 0.45); --skeu-shadow-recessed: inset 0 2px 4px rgba(var(--skeu-ink), 0.12), inset 0 1px 2px rgba(var(--skeu-ink), 0.14), inset 0 -1px 0 var(--skeu-highlight-soft); --skeu-shadow-well: inset 0 1.5px 3px rgba(var(--skeu-ink), 0.1), inset 0 1px 1px rgba(var(--skeu-ink), 0.08), inset 0 -1px 0 rgba(255, 255, 255, 0.7); --skeu-shadow-pressed: inset 0 2px 5px rgba(var(--skeu-ink), 0.22), inset 0 1px 2px rgba(var(--skeu-ink), 0.18), 0 1px 0 var(--skeu-highlight-soft); /* Anodized-orange control (domed, visible thickness) */ --skeu-shadow-control: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -2px 0 rgba(120, 35, 5, 0.32), 0 1px 2px rgba(120, 35, 5, 0.3), 0 6px 14px -6px rgba(240, 93, 37, 0.55); --skeu-shadow-control-hover: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(120, 35, 5, 0.32), 0 2px 3px rgba(120, 35, 5, 0.3), 0 10px 22px -8px rgba(240, 93, 37, 0.62); --skeu-shadow-control-pressed: inset 0 2px 4px rgba(90, 25, 0, 0.45), inset 0 1px 1px rgba(90, 25, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3); --skeu-focus-rim: 0 0 0 3px rgba(240, 93, 37, 0.22), inset 0 1.5px 3px rgba(var(--skeu-ink), 0.08); /* Radii — deliberate per object type */ --skeu-radius-xs: 6px; --skeu-radius-sm: 10px; --skeu-radius-md: 14px; --skeu-radius-lg: 20px; --skeu-radius-xl: 26px; /* Motion */ --skeu-transition-fast: 150ms cubic-bezier(0.2, 0.7, 0.2, 1); --skeu-transition-normal: 260ms cubic-bezier(0.22, 1, 0.36, 1); } /* ── Dark mode (reserved for consumer apps — gini.iq itself ships light-only) ── */ :root.dark, [data-theme="dark"] { --background: var(--gini-ink); --foreground: var(--gini-cream); --card: color-mix(in oklab, var(--gini-ink) 90%, white); --card-foreground: var(--gini-cream); --muted: color-mix(in oklab, var(--gini-ink) 80%, white); --muted-foreground: color-mix(in oklab, var(--gini-cream) 70%, transparent); --border: color-mix(in oklab, var(--gini-cream) 14%, transparent); }