/* ========================================================================== 2026.css — Global custom styles Loaded after index.css (Tailwind). Write any global overrides, shared animations, or cross-component styles here. ========================================================================== */ :root, [data-theme="light"] .--light { /* ===== PRIMITIVE COLORS ===== */ /* neon green */ --primary-hue: 25; /* orange */ --secondary-hue: 13; /* light cyan */ --tertiary-hue: 100; /* dark green */ --quaternary-hue: 104; /* Red */ --quinary-hue: 10; --t3di__color-primary-1: hsl(var(--primary-hue), 95%, 50%); --t3di__color-primary-2: hsl(var(--primary-hue), 95%, 55%); --t3di__color-primary-3: hsl(var(--primary-hue), 95%, 60%); --t3di__color-primary-4: hsl(var(--primary-hue), 95%, 65%); --t3di__color-primary-5: hsl(var(--primary-hue), 95%, 70%); --t3di__color-primary-6: hsl(var(--primary-hue), 95%, 75%); --t3di__color-primary-7: hsl(var(--primary-hue), 95%, 80%); --t3di__color-primary-8: hsl(var(--primary-hue), 95%, 85%); --t3di__color-primary-9: hsl(var(--primary-hue), 95%, 90%); --t3di__color-primary-10: hsl(var(--primary-hue), 95%, 94%); --t3di__color-secondary-1: hsl(var(--secondary-hue), 95%, 50%); --t3di__color-secondary-2: hsl(var(--secondary-hue), 95%, 59%); --t3di__color-secondary-3: hsl(var(--secondary-hue), 95%, 62%); --t3di__color-secondary-4: hsl(var(--secondary-hue), 95%, 65%); --t3di__color-secondary-5: hsl(var(--secondary-hue), 95%, 70%); --t3di__color-secondary-6: hsl(var(--secondary-hue), 95%, 75%); --t3di__color-secondary-7: hsl(var(--secondary-hue), 95%, 80%); --t3di__color-secondary-8: hsl(var(--secondary-hue), 95%, 85%); --t3di__color-secondary-9: hsl(var(--secondary-hue), 95%, 90%); --t3di__color-secondary-10: hsl(var(--secondary-hue), 95%, 95%); --t3di__color-tertiary-1: hsl(var(--tertiary-hue), 85%, 45%); --t3di__color-tertiary-2: hsl(var(--tertiary-hue), 85%, 51%); --t3di__color-tertiary-3: hsl(var(--tertiary-hue), 85%, 60%); --t3di__color-tertiary-4: hsl(var(--tertiary-hue), 85%, 65%); --t3di__color-tertiary-5: hsl(var(--tertiary-hue), 85%, 70%); --t3di__color-tertiary-6: hsl(var(--tertiary-hue), 85%, 75%); --t3di__color-tertiary-7: hsl(var(--tertiary-hue), 85%, 80%); --t3di__color-tertiary-8: hsl(var(--tertiary-hue), 85%, 85%); --t3di__color-tertiary-9: hsl(var(--tertiary-hue), 85%, 90%); --t3di__color-tertiary-10: hsl(var(--tertiary-hue), 85%, 95%); --t3di__color-quaternary-1: hsl(var(--quaternary-hue), 50%, 50%); --t3di__color-quaternary-2: hsl(var(--quaternary-hue), 50%, 59%); --t3di__color-quaternary-3: hsl(var(--quaternary-hue), 50%, 62%); --t3di__color-quaternary-4: hsl(var(--quaternary-hue), 50%, 65%); --t3di__color-quaternary-5: hsl(var(--quaternary-hue), 50%, 70%); --t3di__color-quaternary-6: hsl(var(--quaternary-hue), 50%, 75%); --t3di__color-quaternary-7: hsl(var(--quaternary-hue), 50%, 80%); --t3di__color-quaternary-8: hsl(var(--quaternary-hue), 50%, 85%); --t3di__color-quaternary-9: hsl(var(--quaternary-hue), 50%, 90%); --t3di__color-quaternary-10: hsl(var(--quaternary-hue), 50%, 95%); --t3di__color-quinary-1: hsl(var(--quinary-hue), 90%, 53%); --t3di__color-quinary-2: hsl(var(--quinary-hue), 90%, 59%); --t3di__color-quinary-3: hsl(var(--quinary-hue), 90%, 62%); --t3di__color-quinary-4: hsl(var(--quinary-hue), 90%, 65%); --t3di__color-quinary-5: hsl(var(--quinary-hue), 90%, 70%); --t3di__color-quinary-6: hsl(var(--quinary-hue), 90%, 75%); --t3di__color-quinary-7: hsl(var(--quinary-hue), 90%, 80%); --t3di__color-quinary-8: hsl(var(--quinary-hue), 90%, 85%); --t3di__color-quinary-9: hsl(var(--quinary-hue), 90%, 90%); --t3di__color-quinary-10: hsl(var(--quinary-hue), 90%, 95%); --t3di__color-surface-1: hsl(var(--primary-hue), 6%, 100%); --t3di__color-surface-2: hsl(var(--primary-hue), 6%, 98%); --t3di__color-surface-3: hsl(var(--primary-hue), 8%, 97%); --t3di__color-surface-4: hsl(var(--primary-hue), 6%, 95%); --t3di__color-surface-5: hsl(var(--primary-hue), 6%, 90%); --t3di__color-surface-6: hsl(var(--primary-hue), 6%, 85%); --t3di__color-surface-7: hsl(var(--primary-hue), 6%, 80%); --t3di__color-surface-8: hsl(var(--primary-hue), 6%, 75%); --t3di__color-surface-9: hsl(var(--primary-hue), 6%, 70%); --t3di__color-surface-10: hsl(var(--primary-hue), 6%, 60%); --t3di__color-surface-11: hsl(var(--primary-hue), 6%, 55%); --t3di__color-surface-12: hsl(var(--primary-hue), 6%, 50%); --t3di__color-surface-13: hsl(var(--primary-hue), 6%, 45%); --t3di__color-surface-14: hsl(var(--primary-hue), 6%, 40%); --t3di__color-surface-15: hsl(var(--primary-hue), 6%, 35%); --t3di__color-surface-16: hsl(var(--primary-hue), 6%, 30%); --t3di__color-surface-17: hsl(var(--primary-hue), 6%, 25%); --t3di__color-surface-18: hsl(var(--primary-hue), 6%, 20%); --t3di__color-surface-19: hsl(var(--primary-hue), 6%, 15%); --t3di__color-surface-20: hsl(var(--primary-hue), 6%, 10%); --t3di__font-size: 16px; --t3di__border-radius: var(--t3di__space); --t3di__border-radius-sm: calc(var(--t3di__space) / 2); --t3di__animation-step: 0.125s; --t3di__animation-step-2x: 0.25s; --t3di__animation-step-4x: 0.5s; --t3di__focus-box-shadow: 0 0 0 0.0675em var(--t3di__color-primary-3); --t3di__focus-box-shadow-start: 0 0 0 0.0675em var(--t3di__color-primary-3); --t3di__focus-box-shadow-color: var(--t3di__color-primary-3); --t3di__screen-xl: 1680px; --t3di__screen-lg: 1280px; --t3di__screen-md: 1080px; --t3di__screen-sm: 736px; --t3di__space: 16px; --t3di__border-width: 1px; --t3di__modal__border-radius: 24px; --t3di__font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; --t3di__font-mono: monospace, monospace; --t3di__font-family-mono: 'IBM Plex Mono', monospace, monospace; /* TOKENS FOR LAYERING */ /* === Foreground & Background TOKENS === */ --t3di__color-foreground: hsl(var(--primary-hue), 81%, 11%); --t3di__color-foreground-fixed: hsl(var(--primary-hue), 81%, 11%); --t3di__color-background: hsl(var(--primary-hue), 4%, 98.75%); --t3di__color-foreground-inverse: hsl(var(--primary-hue), 15%, 15%); --t3di__color-background-brand: var(--t3di__color-primary-5); --t3di__white: #ffffff; --t3di__black: #000; --t3di__layer-1: var(--t3di__color-surface-1); --t3di__layer-2: var(--t3di__color-surface-3); --t3di__layer-3: var(--t3di__color-surface-5); --t3di__layer-4: var(--t3di__color-surface-5); --t3di__layer-inset: var(--t3di__white); --t3di__text-default: var(--t3di__color-foreground); --t3di__text-inverse: var(--t3di__color-background); --t3di__text-subtle: color-mix(in srgb, var(--t3di__color-foreground) 65%, transparent); --t3di__text-label: color-mix(in srgb, var(--t3di__color-foreground) 80%, transparent); --t3di__text-selected: color-mix(in srgb, var(--t3di__color-primary-1) 50%, var(--t3di__color-foreground) 50%); --t3di__text-placeholder: color-mix(in srgb, var(--t3di__color-foreground) 50%, transparent); --t3di__text-brand: var(--t3di__color-foreground); /* === Border TOKENS === */ --t3di__border-default: var(--t3di__color-surface-7); --t3di__border-subtle: var(--t3di__color-surface-5); --t3di__border-strong: var(--t3di__color-foreground); --t3di__border-brand: var(--t3di__color-surface-20); --t3di__border-card: var(--t3di__color-surface-6); --t3di__border-card-alt: var(--t3di__color-surface-20); --t3di__border-dot: var(--t3di__color-surface-6); /* === Button TOKENS === */ /* Primary Button */ --t3di__button-primary-background: var(--t3di__color-primary-3); --t3di__button-primary-color: var(--t3di__text-inverse); --t3di__button-primary-border: var(--t3di__border-default); /* Secondary Button */ --t3di__button-secondary-background: var(--t3di__color-surface-5); --t3di__button-secondary-color: var(--t3di__text-default); /* Neutral Button */ --t3di__button-neutral-background: var(--t3di__color-surface-6); --t3di__button-neutral-color: var(--t3di__text-default); /* Tertiary Button */ --t3di__button-tertiary-background: var(--t3di__color-tertiary-6); --t3di__button-tertiary-color: var(--t3di__text-default); /* Quaternary Button */ --t3di__button-quaternary-background: color-mix(in srgb, var(--t3di__color-quaternary-1) 100%, var(--t3di__color-foreground) 50%); --t3di__button-quaternary-color: var(--t3di__text-inverse); /* Danger Button */ --t3di__button-danger-background: var(--t3di__color-quinary-8); --t3di__button-danger-color: var(--t3di__color-quinary-1); /* Warning Button */ --t3di__button-warning-background: var(--t3di__color-quaternary-3); /* ===== link TOKENS ===== */ --t3di__link: var(--t3di__text-default); --t3di__link-primary: var(--t3di__color-primary-4); --t3di__link-primary-selected: var(--t3di__color-primary-4); --t3di__link-primary-disabled: var(--t3di__color-primary-4); @media (max-width: 1024px) { --t3di__space: calc(var(--t3di__font-size) * 1.25); } @media (max-width: 768px) { --t3di__space: calc(var(--t3di__font-size) * 1.125); } } [data-theme="brand"], .--brand { --t3di__color-background: var(--t3di__color-primary-6); --t3di__layer-1: color-mix(in srgb, var(--t3di__color-primary-5) 100%, var(--t3di__color-background) 5%); --t3di__layer-2: color-mix(in srgb, var(--t3di__color-primary-4) 100%, var(--t3di__white) 41%); --t3di__layer-3: color-mix(in srgb, var(--t3di__color-primary-7) 100%, var(--t3di__color-background) 5%); --t3di__layer-4: color-mix(in srgb, var(--t3di__color-primary-8) 100%, var(--t3di__color-background) 5%); --t3di__border-default: color-mix(in srgb, var(--t3di__color-primary-1) 100%, var(--t3di__color-foreground) 10%); --t3di__border-subtle: color-mix(in srgb, var(--t3di__color-primary-1) 100%, var(--t3di__color-foreground) 3%); --t3di__border-card: color-mix(in srgb, var(--t3di__color-primary-1) 100%, var(--t3di__color-foreground) 3%); --t3di__border-dot: color-mix(in srgb, var(--t3di__color-primary-7) 100%, var(--t3di__color-foreground) 100%); --t3di__button-primary-background: var(--t3di__color-primary-7); --t3di__button-primary-color: var(--t3di__color-foreground); --t3di__button-secondary-background: var(--t3di__color-primary-8); --t3di__button-secondary-color: var(--t3di__color-foreground); --t3di__layer-inset: color-mix(in srgb, var(--t3di__color-primary-7) 60%, var(--t3di__white) 60%); --t3di__text-default: var(--t3di__black); --t3di__text-subtle: color-mix(in srgb, var(--t3di__black) 80%, transparent); } /* ===== DARK THEME ===== */ [data-theme="dark"], .--dark { /* TOKENS FOR LAYERING */ --t3di__layer-1: var(--t3di__color-surface-20); --t3di__layer-2: var(--t3di__color-surface-19); --t3di__layer-3: var(--t3di__color-surface-16); --t3di__layer-4: var(--t3di__color-surface-15); --t3di__layer-inset: var(--t3di__black); /* === Foreground & Background TOKENS === */ --t3di__color-foreground: hsl(var(--primary-hue), 4%, 97.5%); --t3di__color-background: hsl(var(--primary-hue), 6%, 10%); --t3di__color-foreground-inverse: hsl(var(--primary-hue), 15%, 15%); --t3di__color-background-brand: var(--t3di__color-primary-1); --t3di__text-default: var(--t3di__color-foreground); --t3di__text-inverse: var(--t3di__color-foreground-inverse); --t3di__text-subtle: var(--t3di__color-surface-8); --t3di__text-label: color-mix(in srgb, var(--t3di__color-foreground) 80%, transparent); --t3di__text-selected: color-mix(in srgb, var(--t3di__color-primary-1) 50%, var(--t3di__color-foreground) 50%); --t3di__text-placeholder: color-mix(in srgb, var(--t3di__color-foreground) 50%, transparent); --t3di__text-brand: var(--t3di__color-primary-3); /* === Border TOKENS === */ --t3di__border-default: var(--t3di__color-surface-10); --t3di__border-subtle: var(--t3di__color-surface-16); --t3di__border-strong: var(--t3di__color-foreground); --t3di__border-brand: color-mix(in srgb, var(--t3di__color-primary-1) 50%, var(--t3di__color-background) 50%); --t3di__border-card: var(--t3di__color-surface-15); --t3di__border-card-alt: var(--t3di__color-surface-15); --t3di__border-dot: var(--t3di__color-surface-18); /* === Button TOKENS === */ /* Primary Button */ --t3di__button-primary-background: var(--t3di__color-primary-3); --t3di__button-primary-color: color-mix(in srgb, var(--t3di__color-primary-4) 10%, var(--t3di__color-background) 99%); --t3di__button-primary-border: color-mix(in srgb, var(--t3di__border-strong) 100%, transparent 100%); /* Secondary Button */ --t3di__button-secondary-background: var(--t3di__color-secondary-4); --t3di__button-secondary-color: var(--t3di__text-inverse); /* Danger Button */ --t3di__button-danger-background: var(--t3di__color-quinary-8); /* Warning Button */ --t3di__button-warning-background: var(--t3di__color-quaternary-3); /* ===== link TOKENS ===== */ --t3di__link: var(--t3di__text-default); --t3di__link-primary: var(--t3di__color-primary-4); --t3di__link-primary-selected: var(--t3di__color-primary-4); --t3di__link-primary-disabled: var(--t3di__color-primary-4); } .text-muted-foreground { color: var(--t3di__text-subtle); } /* ========================================================================== tedi-* form controls — mirrored from app/frontend/components/ui/{button,input,select}.css so Rails-rendered public pages look identical to the React SPA without loading the Vite bundle. Keep in sync when the React sources change. ========================================================================== */ /* --- .tedi-button base --- */ .tedi-button { display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; font-weight: 600; letter-spacing: 0.0375em; line-height: 1em; border-radius: var(--t3di__border-radius-sm); text-align: center; text-decoration: none; white-space: nowrap; position: relative; overflow: hidden; transition: transform var(--t3di__animation-step) ease-in-out, box-shadow var(--t3di__animation-step) ease-in-out, border-color var(--t3di__animation-step) ease-in-out, background-color var(--t3di__animation-step) ease-in-out; } .tedi-button:focus-visible { outline: 0.25em solid var(--t3di__focus-box-shadow-color); outline-offset: 0.125em; box-shadow: var(--t3di__focus-box-shadow); } .tedi-button:active:not(:disabled) { transform: scale(0.975); } .tedi-button:disabled { opacity: 0.5; } .tedi-button:disabled:hover, .tedi-button:disabled:active { transform: none; } .tedi-button svg { pointer-events: none; width: 1em; height: 1em; flex-shrink: 0; } .tedi-button[data-size="default"] { padding: 1em 1em; font-size: 0.875rem; } .tedi-button[data-size="xs"] { padding: 0.375em 0.675em; font-size: 0.75em; font-weight: 400; line-height: 1.1; border-radius: calc(var(--t3di__border-radius-sm) / 2); } .tedi-button[data-size="sm"] { padding: 0.375rem 0.75rem; height: 2.25rem; font-size: 0.875rem; font-weight: 400; border-radius: calc(var(--t3di__border-radius-sm) / 3); } .tedi-button[data-size="lg"] { padding: 1.125em 1.5em; font-size: 1em; line-height: 1.125; font-weight: 500; } .tedi-button[data-variant="secondary"], .secondary-button { background-color: var(--t3di__button-secondary-background); color: var(--t3di__button-secondary-color); border: 1px solid var(--t3di__color-surface-7); border-radius: var(--t3di__border-radius-sm); border-top-color: color-mix(in srgb, var(--t3di__color-surface-8) 50%, transparent 100%); border-left-color: color-mix(in srgb, var(--t3di__color-surface-8) 50%, transparent 100%); border-bottom-color: color-mix(in srgb, var(--t3di__color-surface-8) 50%, transparent 100%); transition: background-color var(--t3di__animation-step) ease, border-color calc(var(--t3di__animation-step) * 2) ease, box-shadow var(--t3di__animation-step) ease, transform var(--t3di__animation-step) ease; } .tedi-button[data-variant="secondary"]:hover { background-color: color-mix(in srgb, var(--t3di__button-secondary-background) 80%, var(--t3di__color-foreground) 4%); border-color: var(--t3di__color-surface-10); } /* --- Variant: default (primary) — gradient depth effect --- */ .tedi-button[data-variant="default"], .primary-button { background-color: var(--t3di__button-primary-background); color: var(--t3di__button-primary-color); font-weight: 700; border-radius: var(--t3di__border-radius-sm); border: 1px solid transparent; text-shadow: -0.5px -0.5px 1px color-mix(in srgb, var(--t3di__color-background) 20%, var(--t3di__color-foreground) 40%), 0 0 12px color-mix(in srgb, var(--t3di__color-secondary-1) 20%, transparent 40%); box-shadow: 0 0 0.5em 0.5px color-mix(in srgb, var(--t3di__color-primary-3) 0%, transparent 100%), 0 0 0 0.5px color-mix(in srgb, var(--t3di__color-background) 10%, var(--t3di__color-foreground) 30%), inset 0.25px 0.125px 0 0.25px color-mix(in srgb, transparent 0%, var(--t3di__color-background) 30%), inset -1px -1px 0 0px color-mix(in srgb, var(--t3di__color-background) 10%, var(--t3di__color-foreground) 20%); transition: background-color var(--t3di__animation-step) ease, border-color calc(var(--t3di__animation-step) * 2) ease, box-shadow var(--t3di__animation-step-2x) ease, transform var(--t3di__animation-step) ease; } .tedi-button[data-variant="default"]:hover, .primary-button:hover { background-color: color-mix(in srgb, var(--t3di__button-primary-background) 100%, var(--t3di__color-background) 11%); box-shadow: 0 0 0.5em 0.5px color-mix(in srgb, var(--t3di__color-primary-4) 100%, transparent 100%), 0 0 0 1px color-mix(in srgb, var(--t3di__color-background) 10%, var(--t3di__color-foreground) 50%), inset 0.25px 0.125px 0 0.25px color-mix(in srgb, transparent 0%, var(--t3di__color-background) 30%), inset -1px -1px 0 0px color-mix(in srgb, var(--t3di__color-background) 10%, var(--t3di__color-foreground) 20%); } .tedi-button[data-variant="default"]::after, .primary-button::after { content: ''; position: absolute; z-index: 1; inset: 0; display: block; background: radial-gradient(ellipse farthest-corner at right bottom, var(--t3di__color-primary-1) 1%, color-mix(in srgb, var(--t3di__color-foreground) 80%, var(--t3di__color-secondary-1)) 33%, color-mix(in srgb, var(--t3di__color-foreground) 40%, var(--t3di__color-secondary-1)) 20%, transparent 20%), radial-gradient(ellipse farthest-corner at left top, var(--t3di__color-foreground) 0%, color-mix(in srgb, var(--t3di__color-foreground) 90%, var(--t3di__color-primary-1) 50%) 2%, color-mix(in srgb, var(--t3di__color-primary-1) 20%, var(--t3di__color-secondary-1)) 15%, color-mix(in srgb, var(--t3di__color-secondary-1) 20%, var(--t3di__color-foreground) 100%) 62.5%, color-mix(in srgb, var(--t3di__color-secondary-1) 40%, var(--t3di__color-foreground) 100%) 100%); opacity: 0.25; mix-blend-mode: overlay; transition: opacity calc(var(--t3di__animation-step) * 2) ease; pointer-events: none; } .tedi-button[data-variant="default"] > *, .primary-button > * { position: relative; z-index: 2; } .tedi-button[data-variant="default"]:active:not(:disabled), .primary-button:active:not(:disabled) { box-shadow: inset 1px 1px 1px 0 color-mix(in srgb, transparent 40%, var(--t3di__color-foreground) 10%), inset -0.5px 1px 1px 0 color-mix(in srgb, transparent 10%, var(--t3di__color-background) 30%), 0 0 0 1px color-mix(in srgb, var(--t3di__color-background) 10%, var(--t3di__color-foreground) 90%); border-color: var(--t3di__color-primary-3); outline: 3px solid var(--t3di__color-primary-3); } /* --- Variant: outline --- */ .tedi-button[data-variant="outline"] { border-radius: var(--t3di__border-radius-sm); background-color: transparent; border: 1px solid var(--t3di__border-default); color: var(--t3di__text-default); } .tedi-button[data-variant="outline"]:hover { background-color: var(--t3di__color-primary-3); color: #fff; border-color: var(--t3di__color-primary-3); } /* --- Variant: ghost --- */ .tedi-button[data-variant="ghost"] { background-color: transparent; color: var(--t3di__text-default); border: 1px solid transparent; } .tedi-button[data-variant="ghost"]:hover { background-color: var(--t3di__color-surface-3); } /* --- .tedi-input --- */ .tedi-input { display: flex; width: 100%; height: 3.5em; padding: 1.125em; line-height: 1.125em; border-radius: calc(var(--t3di__border-radius-sm) / 3); border: 1px solid var(--t3di__border-default); background-color: transparent; font-size: 1em; font-weight: 400; color: var(--t3di__text-default); outline: 0; box-shadow: 0 0 0 0 transparent; transition: outline var(--t3di__animation-step) ease-in-out, transform var(--t3di__animation-step) ease-in-out, box-shadow calc(var(--t3di__animation-step) * 2) ease-in-out, border-color var(--t3di__animation-step) ease-in-out, border-radius var(--t3di__animation-step-2x) ease-in-out, background-color var(--t3di__animation-step) ease-in-out; } .tedi-input::placeholder { color: var(--t3di__text-placeholder); font-weight: 300; overflow: hidden; text-overflow: ellipsis; } .tedi-input:focus { border-color: var(--t3di__focus-box-shadow-color); outline: 0.25em solid var(--t3di__focus-box-shadow-color); outline-offset: 0; box-shadow: var(--t3di__focus-box-shadow); border-radius: var(--t3di__border-radius-sm); } .tedi-input[data-size="sm"] { padding-top: 0.375rem; padding-bottom: 0.375rem; height: 2.25rem; font-size: 0.875rem; } /* --- .tedi-native-select: style a native