/* Softphia design tokens (2026-11-06). Source of truth: the SoftEdge app theme,
   softedge/app/lib/ui/theme.dart. Every colour on the site comes from these tokens; the CSS files
   reference semantic tokens (--bg, --surface, --ink, --accent…) which flip between the dark theme
   (SoftEdge as it is) and the light theme (derived from the same palette). The owner's rule:
   "en doğru renkler onlar". */
:root {
    /* --- raw SoftEdge tokens (dark theme values, unchanged) --- */
    --se-space: #04070b;
    --se-space-high: #0a1117;
    --se-glass: rgba(255, 255, 255, .06);
    --se-glass-border: rgba(255, 255, 255, .10);
    --se-glass-strong: rgba(255, 255, 255, .12);
    --se-cyan: #3fd6e8;
    --se-cyan-soft: #8beaf4;
    --se-teal: #168979;
    --se-violet: #7062f2;
    --se-text: #e8f1f4;
    --se-text-dim: #9aaeb8;
    --se-text-faint: #5d6e78;
    --se-ok: #3ddc97;
    --se-amber: #f5b544;
    --se-red: #ff5d5d;
    --se-cyan-rgb: 63, 214, 232;
    --se-cyan-soft-rgb: 139, 234, 244;
    --se-space-rgb: 4, 7, 11;
    --se-space-high-rgb: 10, 17, 23;

    /* The cyan gradient: decorative accents only (never a button fill since UI system v5). */
    --gradient: linear-gradient(90deg, var(--se-cyan), var(--se-cyan-soft));
    --gradient-vertical: linear-gradient(160deg, var(--se-cyan), var(--se-cyan-soft));
    --accent: var(--se-cyan);
    --accent-soft: var(--se-cyan-soft);
    --on-accent: var(--se-space);          /* dark ink on cyan fills: 12.6:1 */
    --ok: var(--se-ok);
    --amber: var(--se-amber);
    --red: var(--se-red);
    --violet: var(--se-violet);

    /* aliases kept for the earlier page styles */
    --pp-cyan: var(--se-cyan);
    --pp-cyan-soft: var(--se-cyan-soft);
    --edge-cyan: var(--se-cyan);
    --edge-soft: var(--se-cyan-soft);
    --edge-space: var(--se-space);
    --edge-space-high: var(--se-space-high);
    --edge-text: var(--se-text);
    --edge-text-dim: var(--se-text-dim);

    font-family: "DM Sans", Arial, sans-serif;
    color-scheme: light dark;
}

/* --- LIGHT theme (default when the system prefers light): derived from the same palette ---
   bg/surface: near-white with a faint cyan tint; ink: space / spaceHigh; cyan gradient accents;
   a darker cyan of the same hue (186°) for small text and links (AA on white: 4.9:1). */
:root,
:root[data-theme="light"] {
    --bg: #f3f8fa;                 /* page */
    --surface: #ffffff;            /* cards, header, panels */
    --surface-2: #e8f3f6;          /* tinted panels, hover rows */
    --surface-3: #d6e9ee;          /* stronger tint, selected */
    --line: #d2e1e6;               /* hairlines */
    --line-strong: #adc5cd;        /* inputs, emphasised borders */
    --ink: var(--se-space-high);   /* headings: 18.3:1 on white */
    --ink-2: #1a2930;              /* body text: 14.6:1 on white */
    --muted: #4f626b;              /* secondary text: 6.9:1 on white, 6.3:1 on --bg */
    --faint: #7a8b93;              /* decorative / large text only: 3.6:1 */
    --accent-text: #0c6c79;        /* links, eyebrows, icons: hue 186°, 5.4:1 on white, 4.9:1 on --bg */
    --accent-tint: #ddf5f9;        /* selected chips, info boxes */
    --ok-tint: #dcf7ea;
    --amber-tint: #fdf0d6;
    --red-tint: #ffe3e3;
    --shadow-color: rgba(10, 17, 23, .10);
    --shadow: var(--elev-lg);
    --overlay-light: rgba(255, 255, 255, .78);   /* captions over photos */
    --overlay-dark: rgba(10, 17, 23, .62);
    --on-dark: var(--se-text);     /* text on dark sections, both themes */
    --on-dark-dim: var(--se-text-dim);
    --dark: var(--se-space);       /* dark sections keep the SoftEdge space tones in both themes */
    --dark-high: var(--se-space-high);
    --frame: #0a1117;              /* device frames around screenshots */
    --logo-tile: #ffffff;          /* the logo files have white backgrounds: always a white tile */
    color-scheme: light;
}

/* --- DARK theme: SoftEdge as it is --- */
:root[data-theme="dark"] {
    --bg: var(--se-space);
    --surface: var(--se-space-high);
    --surface-2: var(--se-glass);
    --surface-3: var(--se-glass-strong);
    --line: var(--se-glass-border);
    --line-strong: rgba(255, 255, 255, .22);
    --ink: var(--se-text);         /* 16.9:1 on space */
    --ink-2: var(--se-text);
    --muted: var(--se-text-dim);   /* 8.6:1 on space, 7.8:1 on space-high */
    --faint: var(--se-text-faint); /* 3.6:1: decorative only */
    --accent-text: var(--se-cyan); /* 11.3:1 on space */
    --accent-tint: rgba(63, 214, 232, .14);
    --ok-tint: rgba(61, 220, 151, .16);
    --amber-tint: rgba(245, 181, 68, .16);
    --red-tint: rgba(255, 93, 93, .16);
    --shadow-color: rgba(0, 0, 0, .55);
    --shadow: var(--elev-lg);
    --overlay-light: rgba(10, 17, 23, .72);
    --overlay-dark: rgba(0, 0, 0, .7);
    --frame: #1a2730;
    --logo-tile: #ffffff;
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: var(--se-space);
        --surface: var(--se-space-high);
        --surface-2: var(--se-glass);
        --surface-3: var(--se-glass-strong);
        --line: var(--se-glass-border);
        --line-strong: rgba(255, 255, 255, .22);
        --ink: var(--se-text);
        --ink-2: var(--se-text);
        --muted: var(--se-text-dim);
        --faint: var(--se-text-faint);
        --accent-text: var(--se-cyan);
        --accent-tint: rgba(63, 214, 232, .14);
        --ok-tint: rgba(61, 220, 151, .16);
        --amber-tint: rgba(245, 181, 68, .16);
        --red-tint: rgba(255, 93, 93, .16);
        --shadow-color: rgba(0, 0, 0, .55);
        --shadow: var(--elev-lg);
        --overlay-light: rgba(10, 17, 23, .72);
        --overlay-dark: rgba(0, 0, 0, .7);
        --frame: #1a2730;
        color-scheme: dark;
    }
}

/* --- UI system tokens (v5, 2026-11-07): buttons, elevation, controls. Components: ui.css. ---
   Primary (buttons, owner 8 Nov 2026): SoftEdge cyan #04bed7 in both themes with the darkest ink #0a1117 on it
   (8.46:1; hover #03aec5 7.11:1; active #03a6bc 6.50:1). White would be 2.25:1, so never white on it. On the light
   page the fill is 2.1:1 against the background, so light mode adds a 1 px #038a9c edge (3.83:1 on the page);
   on dark pages and dark bands the fill stands out by itself (8.99:1 on space). Other solid accents (a chosen
   chip, a step number, a pressed card) keep the petrol as --accent-solid with white text.
   Elevation: one small scale of layered, soft, neutral shadows (slate tinted towards petrol); no coloured glows.
   The only coloured ring is the focus ring. */
:root,
:root[data-theme="light"] {
    --primary: #04bed7;            /* ink text 8.46:1 */
    --primary-hover: #03aec5;      /* 7.11:1 */
    --primary-active: #03a6bc;     /* 6.50:1 */
    --on-primary: #0a1117;         /* the darkest ink, also the icon */
    --primary-border: #038a9c;     /* the button's edge on the light page: 3.83:1 on the background */
    --accent-solid: #0b6470;       /* petrol accents that are not buttons: white text 6.8:1 */
    --on-accent-solid: #ffffff;
    --secondary-bg: #ffffff;
    --secondary-bg-hover: #f2f6f7;
    --secondary-border: #d0dbdf;
    --secondary-border-hover: #b9c8cd;
    --secondary-fg: var(--se-space-high);
    --control-bg: #ffffff;
    --control-border: #c9d5da;
    --control-border-hover: #a9bbc2;
    --row-hover: #f6f9fa;          /* accordion rows, menu rows */
    --neutral-soft: #eef3f5;       /* icon circles, toggle track */
    --neutral-strong: #e1e8eb;
    --disabled-bg: #e7edef;
    --disabled-fg: #7a8b93;
    --focus-ring: #0f7f8d;         /* 4.7:1 on white */
    --elev-xs: 0 1px 2px rgb(12 28 36 / .06);
    --elev-sm: 0 1px 2px rgb(12 28 36 / .06), 0 2px 6px -1px rgb(12 28 36 / .06);
    --elev-md: 0 1px 2px rgb(12 28 36 / .05), 0 4px 12px -2px rgb(12 28 36 / .08);
    --elev-lg: 0 2px 4px -1px rgb(12 28 36 / .05), 0 12px 32px -6px rgb(12 28 36 / .14);
}
:root[data-theme="dark"] {
    --primary: #04bed7;            /* ink text 8.46:1; 8.99:1 against space */
    --primary-hover: #03aec5;      /* 7.11:1 */
    --primary-active: #03a6bc;     /* 6.50:1 */
    --on-primary: #0a1117;
    --primary-border: transparent;
    --accent-solid: #0e7885;       /* white text 5.2:1 */
    --on-accent-solid: #ffffff;
    --secondary-bg: rgba(255, 255, 255, .06);
    --secondary-bg-hover: rgba(255, 255, 255, .10);
    --secondary-border: rgba(255, 255, 255, .14);
    --secondary-border-hover: rgba(255, 255, 255, .24);
    --secondary-fg: var(--se-text);
    --control-bg: rgba(255, 255, 255, .04);
    --control-border: rgba(255, 255, 255, .16);
    --control-border-hover: rgba(255, 255, 255, .26);
    --row-hover: rgba(255, 255, 255, .03);
    --neutral-soft: rgba(255, 255, 255, .07);
    --neutral-strong: rgba(255, 255, 255, .12);
    --disabled-bg: rgba(255, 255, 255, .07);
    --disabled-fg: #6f828c;
    --focus-ring: var(--se-cyan);
    --elev-xs: 0 1px 2px rgb(0 0 0 / .45);
    --elev-sm: 0 1px 2px rgb(0 0 0 / .45), 0 2px 8px -1px rgb(0 0 0 / .35);
    --elev-md: 0 1px 2px rgb(0 0 0 / .5), 0 6px 16px -4px rgb(0 0 0 / .5);
    --elev-lg: 0 2px 4px rgb(0 0 0 / .45), 0 16px 40px -8px rgb(0 0 0 / .65);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary: #04bed7; --primary-hover: #03aec5; --primary-active: #03a6bc; --on-primary: #0a1117; --primary-border: transparent; --accent-solid: #0e7885; --on-accent-solid: #ffffff;
        --secondary-bg: rgba(255, 255, 255, .06); --secondary-bg-hover: rgba(255, 255, 255, .10);
        --secondary-border: rgba(255, 255, 255, .14); --secondary-border-hover: rgba(255, 255, 255, .24); --secondary-fg: var(--se-text);
        --control-bg: rgba(255, 255, 255, .04); --control-border: rgba(255, 255, 255, .16); --control-border-hover: rgba(255, 255, 255, .26);
        --row-hover: rgba(255, 255, 255, .03); --neutral-soft: rgba(255, 255, 255, .07); --neutral-strong: rgba(255, 255, 255, .12);
        --disabled-bg: rgba(255, 255, 255, .07); --disabled-fg: #6f828c; --focus-ring: var(--se-cyan);
        --elev-xs: 0 1px 2px rgb(0 0 0 / .45);
        --elev-sm: 0 1px 2px rgb(0 0 0 / .45), 0 2px 8px -1px rgb(0 0 0 / .35);
        --elev-md: 0 1px 2px rgb(0 0 0 / .5), 0 6px 16px -4px rgb(0 0 0 / .5);
        --elev-lg: 0 2px 4px rgb(0 0 0 / .45), 0 16px 40px -8px rgb(0 0 0 / .65);
    }
}

html { background: var(--bg); }
body { background: var(--bg); color: var(--ink-2); }

/* DM Sans (SIL Open Font License), self-hosted variable font: latin and latin-ext subsets, weights 100-1000. */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url('../fonts/dm-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* A metric-compatible fallback for DM Sans so text does not jump when the webfont arrives. */
/* Measured 2026-11-06 against DM Sans on the site's own text: regular/medium Arial must grow 4 %, bold Arial matches. */
@font-face { font-family: 'DM Sans Fallback'; src: local('Arial'), local('ArialMT'), local('Helvetica Neue'), local('Helvetica'); font-weight: 100 449; size-adjust: 103%; ascent-override: 96%; descent-override: 30%; line-gap-override: 0%; }
@font-face { font-family: 'DM Sans Fallback'; src: local('Arial'), local('ArialMT'), local('Helvetica Neue'), local('Helvetica'); font-weight: 450 574; size-adjust: 105.5%; ascent-override: 94%; descent-override: 29%; line-gap-override: 0%; }
@font-face { font-family: 'DM Sans Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('Helvetica Bold'); font-weight: 575 900; size-adjust: 100%; ascent-override: 99%; descent-override: 31%; line-gap-override: 0%; }
:root { font-family: 'DM Sans', 'DM Sans Fallback', Arial, sans-serif; }
body, button, input, select, textarea { font-family: 'DM Sans', 'DM Sans Fallback', Arial, sans-serif; }

/* legacy names used by the older stylesheets, all pointing at the semantic tokens */
:root { --paper: var(--bg); --paper-solid: var(--surface); --cyan: var(--accent); --cyan-soft: var(--accent-tint); --danger: var(--red); --container: 1400px; }