/* ATTENTION STOLEN — color primitives + semantic layer. Values transcribed verbatim from ATTENTION STOLEN-Design System_v2.fig */
:root{
/* primary — dopamine (rare, deliberate; never flat bg) */
--c-dopamine:#E93D49;
--c-dopamine-deep:#C22A35;
/* hormones */
--c-serotonin:#36BA7A;
--c-oxytocin:#F46FAB;
--c-endorphin:#FF8E21;
--c-endorphin-deep:#D96E1A;
/* neutrals — void system */
--c-void:#070708;
--c-surface:#121215;
--c-ink:#ffffff;
--c-paper:#F4F2EE;
--c-bezel:#111114;
--c-ink-2:#16161A;
/* app-icon gradients (notification cards) */
--grad-dopamine:linear-gradient(135deg,#E93D49 0%,#C22A35 100%); /* @kind color */
--grad-instagram:linear-gradient(135deg,#FF7ABC 0%,#CF5E91 100%); /* @kind color */
--grad-calls:linear-gradient(135deg,#3CD089 0%,#2EA069 100%); /* @kind color */
--grad-tiktok:linear-gradient(135deg,#FF4452 0%,#C8343F 100%); /* @kind color */
--c-news:#C22A35;
/* wallpaper gradients (photo underlay) */
--grad-wall-dark:linear-gradient(180deg,#0D0D12 0%,#1A171F 100%); /* @kind color */
--grad-wall-light:linear-gradient(180deg,#EEE3E3 0%,#CDCDD8 100%); /* @kind color */
/* glow shadows */
--shadow-glow-dopamine:0px 10px 30px 0px rgba(233,61,73,0.45);
--shadow-glow-oxytocin:0px 5px 14px 0px rgba(244,111,171,0.35);
--shadow-glow-serotonin:0px 5px 14px 0px rgba(54,186,122,0.35);
--shadow-glow-dopamine-sm:0px 5px 14px 0px rgba(233,61,73,0.35);
/* semantic — dark (void) is default */
--bg:var(--c-void);
--text:var(--c-ink);
--text-85:rgba(255,255,255,0.85);
--text-dim:rgba(255,255,255,0.55);
--text-faint:rgba(255,255,255,0.45);
--glass:rgba(255,255,255,0.01);
--terminal-bg:rgba(0,0,0,0.15);
--terminal-ring:inset 0 0 0 1px rgba(105,0,7,0.52); /* @kind shadow */
--btn-primary-grad:linear-gradient(94.19deg,rgba(233,61,73,0.2) -0.38%,rgba(194,42,53,0.2) 94.24%); /* @kind color */
--btn-primary-shadow:0px 10px 30px 0px rgba(233,61,73,0.45);
--grad-wall:var(--grad-wall-dark);
--device-shadow:0 0 0 8px #111114,0px 30px 80px 0px rgba(0,0,0,0.35);
--status-hijacked:var(--c-dopamine);
--status-reclaimed:var(--c-serotonin);
--status-offline:#9AA0A8;
}
/* light (paper) mode — semantic remap only, same primitives */
.mode-light{
--bg:var(--c-paper);
--text:var(--c-ink-2);
--text-85:rgba(22,22,26,0.85);
--text-dim:rgba(22,22,26,0.55);
--text-faint:rgba(22,22,26,0.5);
--glass:rgba(255,255,255,0.3);
--terminal-bg:rgba(255,255,255,0.06);
--terminal-ring:inset 0 0 0 1px rgba(233,61,73,0.12); /* @kind shadow */
--btn-primary-grad:linear-gradient(94.19deg,rgba(233,61,73,0.73) -0.38%,rgba(194,42,53,0.73) 94.24%); /* @kind color */
--btn-primary-shadow:0px 10px 30px 0px rgba(233,61,73,0.35);
--grad-wall:var(--grad-wall-light);
--device-shadow:0 0 0 8px #111114,0px 30px 80px 0px rgba(22,22,26,0.25);
}
/* Two voices: Outfit = human, IBM Plex Mono = system. Sizes from the .fig (390×844 mobile frames). */
:root{
--font-human:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--font-system:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
/* display (Outfit Thin 100) */
--fs-clock:112px;
--fs-count:64px;
/* human scale */
--fs-question:24px;   /* Outfit 400, lh 1.3 */
--fs-statement:19px;  /* Outfit 300, lh 1.45 */
--fs-notif-body:14px; /* Outfit 400 */
--fs-notif-app:12px;  /* Outfit 600, 60% opacity */
--fs-btn:16px;        /* Outfit 500 */
/* system (mono) scale */
--fs-terminal:13px;
--fs-mono-label:12px; /* letter-spacing 2–4px, uppercase */
--fs-mono-micro:8px;  /* keypad sublabels, ls 1.5px */
--ls-label:2px;
--ls-label-wide:3px;
--ls-label-xwide:4px;
}
/* Radii, blur, spacing — verbatim from the .fig */
:root{
--r-device:54px;   /* phone frame */
--r-notif:26px;    /* notification card (large hero variant: 28px) */
--r-notif-lg:28px;
--r-system:22px;   /* system/terminal one-liner */
--r-terminal:18px; /* two-line terminal card */
--r-btn:22px;      /* CTA buttons */
--r-icon:12px;     /* 40px app icon (48px hero: 14px) */
--r-icon-lg:14px;
--r-pill:999px;
--blur-glass:22px;
/* notif card internals */
--pad-notif:13px 16px;
--gap-notif:12px;
--pad-terminal:16px 18px;
--pad-btn:0 24px;
}
a{color:var(--c-dopamine);text-decoration:none}
a:hover{color:var(--c-dopamine-deep)}