:root {

    --phone-w: 360px;
    --phone-h: 780px;
    --frame-radius: 54px;
    --screen-radius: 44px;
    --frame-color: #1a1a1c;

    --accent: #0a84ff;
    --green: #30d158;
    --red: #ff453a;
    --orange: #ff9f0a;

    --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;

    --app-bg: #000000;
    --app-surface: #1c1c1e;
    --app-surface-2: #2c2c2e;
    --app-text: #ffffff;
    --app-text-dim: rgba(255, 255, 255, 0.55);
    --app-separator: rgba(255, 255, 255, 0.08);
}

#phone-screen.theme-light {
    --app-bg: #f2f2f7;
    --app-surface: #ffffff;
    --app-surface-2: #e5e5ea;
    --app-text: #000000;
    --app-text-dim: rgba(60, 60, 67, 0.6);
    --app-separator: rgba(60, 60, 67, 0.12);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
}

html, body {
    width: 100%;
    height: 100%;
    background: transparent;
    overflow: hidden;
    font-family: var(--font);
}

.hidden {
    display: none !important;
}

body.dev {
    background: radial-gradient(1200px 800px at 30% 20%, #23262e, #0c0d10);
}

.wp-aurora   { background: linear-gradient(160deg, #0f2027 0%, #203a43 30%, #2c5364 60%, #4ca1af 100%); }
.wp-sunset   { background: linear-gradient(165deg, #1a0533 0%, #6f1d46 45%, #c94b4b 80%, #f2994a 100%); }
.wp-ocean    { background: linear-gradient(170deg, #000428 0%, #004e92 100%); }
.wp-graphite { background: linear-gradient(160deg, #16161a 0%, #2b2b31 55%, #3a3a42 100%); }
.wp-xyral    { background: linear-gradient(160deg, #10151a 0%, #14343a 45%, #0f6b6b 75%, #d98e2b 130%); }
.wp-midnight { background: linear-gradient(170deg, #05060f 0%, #0b1030 60%, #1b2560 100%); }
.wp-rose     { background: linear-gradient(160deg, #2b0a1a 0%, #7a1f4d 55%, #ff5e8a 110%); }
.wp-emerald  { background: linear-gradient(160deg, #04120c 0%, #0c3a26 55%, #1f8a5a 110%); }
.wp-gold     { background: linear-gradient(160deg, #171106 0%, #4d3608 55%, #c99a2e 115%); }

.accent-blue   { --accent: #0a84ff; }
.accent-teal   { --accent: #2ec8c8; }
.accent-amber  { --accent: #d98e2b; }
.accent-purple { --accent: #bf5af2; }
.accent-green  { --accent: #2fb45c; }
.accent-rose   { --accent: #ff375f; }

#phone-screen.ts-small .app-view { zoom: 0.9; }
#phone-screen.ts-large .app-view { zoom: 1.12; }